Question

在我的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 Context将url道具传递给WebViewScreen组件？

着眼于the react-navigation docs，它提到了另一种选择：

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

但是有一些警告，所以我想尝试使用上下文。理想情况下，我将能够压入堆栈并将WebViewScreen指向任何网址：

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

Answer 1

如果您只关心导航操作到Webview所在的屏幕上的值更改，则可以简单地通过route属性访问在导航中传递的数据：

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

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

来源：https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam

Answer 2

添加提供程序并在您的组件中获取值。

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);

React Native：如何在React Navigation中传递道具

2 个答案: