react-native - 如何将道具传递给 createBottomTabNavigator 的所有选项卡
问题描述
我的应用程序使用以下命令createBottomTabNavigator
从 a调用 a由 2 个选项卡组成,一个是 Stack Navigator,第二个只是一个 React 组件。当我导航到Stack Navigator 时,我传入的道具可用,但如果我选择选项卡导航器的第二个选项卡,则道具不可用。createSwitchNavigator
this.props.navigation.navigate('AppMenu', {UserName: 'First Name'});
createBottomTabNavigator
initialRouteName
有没有一种方法可以在渲染时将道具传递给底部选项卡导航器的所有选项卡?
这是应用程序的图表,以及可以在 Snack 中运行的示例代码。
import React from 'react';
import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator } from 'react-navigation';
class LoginScreen extends React.Component {
_navToMain = () => {
console.log('Login Screen: Passing user: First Name');
this.props.navigation.navigate('AppMenu', {UserName: 'First Name'});
}
render () {
return (
<View style={{flexDirection: 'column', paddingTop:20}}>
<Text>Pass UserName prop to createBottomTabNavigator</Text>
<Button title='Login!' onPress={this._navToMain}/>
</View>
)
}
}
class SyncScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Sync Screen',
};
};
render () {
return (
<View style={{flexDirection: 'column', paddingTop:20}}>
<Text>Sync Screen Navigation Prop UserName (missing!): {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>
<Button title='Test Button' onPress={() => {}} />
</View>
);
}
}
class AppMenuScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Stack Navigator',
};
};
_navToOne = () => {
console.log('Going to Stack One')
this.props.navigation.navigate('StackOne', {UserName: this.props.navigation.getParam('UserName')});
}
render () {
return (
<View style={{flexDirection: 'column'}} >
<Text>App Menu Navigation Prop UserName passed from SwitchNavigator: {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>
<Button title='Screen one' onPress={this._navToOne} />
</View>
)
}
}
class StackOneScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Stack One Screen',
};
};
render () {
return (
<View style={{flexDirection: 'row'}} >
<Text>Stack One Screen Navigation Props: {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>
</View>
)
}
}
const AppStack = createStackNavigator(
{
AppMenu: AppMenuScreen,
StackOne: StackOneScreen,
},
{
initialRouteName: "AppMenu",
navigationOptions: {
headerTintColor: "#a41034",
headerStyle: {
backgroundColor: "#fff"
}
}
}
);
const MainTabs = createBottomTabNavigator(
{
'Apps': { screen: AppStack },
'Sync': { screen: SyncScreen },
},
{
navigationOptions: ({ navigation }) => ({
title: navigation.state,
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
}
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'gray',
tabBackgroundColor: 'black',
labelStyle:{
fontSize: 24,
marginBottom:10,
}
},
animationEnabled: true,
swipeEnabled: false,
}
);
const AppNavigator = createSwitchNavigator(
{
Login: LoginScreen,
Main: MainTabs
},
{
initialRouteName: 'Login',
backBehavior: "initialRoute",
}
);
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
包.json
"react": "16.5.0",
"react-native": "0.57.1",
"react-navigation": "^2.0.0"
解决方案
您可以使用导航传递道具
_navToOne = () => {
console.log("Going to Stack One");
this.props.navigation.navigate({
routeName: "StackOne",
params: { UserName: this.props.navigation.state.params.UserName }
});
};
如果您想访问使用导航传递的道具
this.props.navigation.state.params.PROPNAME
// PROPNAME is the prop you passed and want to get
推荐阅读
- spring - Spring Cloud Gateway 路由不起作用
- java - ClassNotFoundException 在云服务器上运行但在本地 Eclipse 中工作
- android - 如何与 Gradle 脚本并行执行 git 命令?
- c++ - 从文本图像 OpenCV C++ 中查找行
- python - pytest 在包含 __init__.py 的文件夹中运行时失败
- reactjs - 我应该如何为 IOS 创建自定义下拉选择器而不是默认 Spinner 视图
- python - 在同一脚本中运行 2 个 Python 云函数
- python - 如何将多个stings变体转换为列中的整数?
- python - 展平嵌套字典并覆盖值
- android - 当数据在后台加载时,我们如何使用 ProgressBar 和 ExecutorService 来吸引用户