Re-render web-view on bottomTabNavigator

Question

How I can re-render a web-view running inside a app built with react native. For exemple: The cart tab need to load the same url every time I click on it.

This is the cart class:

import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
  RefreshControl,
  Text, } from 'react-native';
import Config from '../config';



export default class CarrinhoScreen extends React.Component {

  reload() {
    this.myWebView.reload()
  }

  render() {
    return (
    <>
        <View style={{ flex: 1 }}>
          <WebView
            source={{ uri: 'https://www.genieshopp.com/checkout/cart/' }}
            userAgent='bring-app'
            startInLoadingState={true}
            ref={(ref) => this.myWebView = ref}
          />
        </View>
    </>
    )
  }
};

Here is where the tabNavigator is created:

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CarrinhoScreen from '../screens/CarrinhoScreen';

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const CarrinhoStack = createStackNavigator(
  {
    Carrinho: CarrinhoScreen
  },
  config
);

CarrinhoStack.navigationOptions = {
  tabBarLabel: 'Carrinho',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-cart' : 'md-cart'}/>
  ),
};

CarrinhoStack.path = '';

const tabNavigator = createBottomTabNavigator(
{
  CarrinhoStack,
  },
  {
    backBehavior: 'history'
  }
);

tabNavigator.path = '';

export default tabNavigator;

I know there is the myWebView.reload(), but I want to know how I reload it when the bottom tab is switched or when I click on the same icon.

Answer 1

通过将resetOnBlur: CarrinhoScreen放在resetOnBlur: CarrinhoScreen之后backBehavior: history您可以将任何其他要重置的屏幕放在那里。