如何在反应导航上重新加载 WebView答案

【问题标题】：How Reload WebView on react navigation如何在反应导航上重新加载 WebView
【发布时间】：2020-07-09 21:46:04
【问题描述】：

当我从导航器单击按钮时，如何将 webview 重新加载到初始源？我可以使用重置原始组件吗？

React.useEffect(() => {
     const unsubscribe = navigation.addListener('tabPress', e => {
  
});

或者我可以在组件上重新加载 webview？

function TabOneNavigator({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('tabPress', e => {
      alert('Default behavior prevented');
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="Perfil"
        component={TabOneScreen}
        options={{ headerTitle: 'IzyJob' }}
      />
    </TabOneStack.Navigator>
  );
}

我的屏幕

export default class App extends React.Component {
  state = {
    url: 'https://www.google.com'
  };
  render() {
    return <WebView 
    source={{ uri: this.state.url }} 
    style={{ marginTop: 0 }} />;
  }
}

我的想法是当 webview 上的页面与 state.url 不同并且单击标签导航时，我会重新加载到初始 url

【问题讨论】：

标签： react-native expo react-navigation

【解决方案1】：

首先为webview 创建引用，如下所示

<WebView
    ref={(ref) => { this.webview = ref; }}
    source={{ uri: this.state.url }} 
    style={{ marginTop: 0 }} />;

然后在你想要的地方调用this.webview.reload()，这段代码将帮助你刷新你的webview

【讨论】：

如何在另一个组件中使用 this.webview.reload()？我需要和 ref 一起使用吗？
在父组件中创建一个 ref 并传递给 webview 组件并将该 ref 提供给 webview 然后您可以通过从父组件调用 ref.reload() 来刷新 webview