Блог

В моем приложении React Native я использую react-navigation и у меня есть компонент класса, использующий react-native-webview :

 <WebView source={{ uri: this.props.url }} />
  

Это реализовано в StackNavigator следующим образом:

 <Stack.Navigator>
  <Stack.Screen name="Viewer" component={WebViewScreen} />
</Stack.Navigator>
  

Как я могу использовать контекст React для передачи url реквизита WebViewScreen компоненту?

Просматривая документы react-navigation, в нем упоминается альтернатива:

 <Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
  

но с оговорками, поэтому я хотел бы попробовать использовать контекст. В идеале, я мог бы нажать на стек и указать WebViewScreen на любой URL:

 this.props.navigation.push('Viewer', {
    route: 'https://www.example.com'
})
  

Если вас интересует только изменение значения при навигации к экрану, на котором находится ваш Webview, вы можете просто получить доступ к данным, которые вы передали при навигации, через route prop:

 const route = this.props.route.params?.route ?? 'default url';

<WebView source={{ uri: route }} />
  

Источник:https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam

Добавьте поставщика и получите значение в вашем компоненте.

 const MyContext = React.createContext();

<MyContext.Provider value={{url: '/somethig'}}>
  <Stack.Navigator>
    <Stack.Screen name="Viewer" component={WebViewScreen} />
  </Stack.Navigator>
</MyContext.Provider>
  

В вашем HomeScreen используйте хуки, чтобы получить ваше значение:

 const value = useContext(MyContext);