在createStackNavigator中传递和检索导航选项中的键值,可以通过以下步骤实现:
下面是一个示例代码:
import { createStackNavigator } from 'react-navigation';
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ screenProps }) => ({
title: screenProps.title, // 通过screenProps获取键值对中的值
}),
},
Details: {
screen: DetailsScreen,
navigationOptions: ({ navigation, screenProps }) => ({
title: navigation.getParam('title', ''), // 通过navigation.getParam获取键值对中的值
}),
},
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'My App', // 设置初始的键值对
};
}
render() {
return (
<AppNavigator screenProps={{ title: this.state.title }} />
);
}
}
在上面的示例中,通过screenProps传递了一个键值对,其中键为"title",值为"My App"。在HomeScreen和DetailsScreen中,可以通过screenProps.title来获取该值。
另外,在DetailsScreen中,还可以通过navigation.getParam方法来获取键值对中的值。该方法接受两个参数,第一个参数是键的名称,第二个参数是默认值。如果键不存在,则返回默认值。
这样,就可以在createStackNavigator中传递和检索导航选项中的键值了。
推荐的腾讯云相关产品:腾讯云云开发(https://cloud.tencent.com/product/tcb)
领取专属 10元无门槛券
手把手带您无忧上云