我们也检查了其他问题和文档,但找不到任何可以解决此问题的解决方案。这是代码:
它显示错误消息:
反应儿童只能接受一个反应元素的孩子。
const MainTabBar = TabNavigator(
{
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = 'search';
}
else if (routeName === 'Profile') {
iconName = 'contact';
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#222222',
inactiveTintColor: '#222222',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
initialRouteName: 'Saved'
}
);
const Main = StackNavigator(
{
Signin: {screen: SigninScreen},
Signup: {screen: SignupScreen},
Welcome: {screen: WelcomeScreen},
Settings: {screen: SettingsScreen},
Post: {screen: PostScreen},
MainTab: {screen: MainTabBar}
},
{
initialRouteName: "Signin",
headerMode: "none",
},
);
这两个导航器Stack导航器和Tab导航器如何相互配合?目前我们正试图从Signin导航到Home,而this.props.navigation.navigate()选项不起作用。在过去,当我们使用Drawer而不是tab时,它可以工作,但现在它不适用于Tabs。
你可以试试这个:
const MainTabBar = TabNavigator(
{
Home: {screen: HomeScreen},
Chat: {screen: ChatScreen},
Profile: {screen: ProfileScreen},
},
...
// Set initial tab to HomeScreen/Tab
initialRouteName: 'Home'
swipeEnabled: false,
}
);
const Main = StackNavigator(
{
Post: {screen: PostScreen},
Signin: {screen: SigninScreen},
Signup: {screen: SignupScreen},
Welcome: {screen: WelcomeScreen},
Settings: {screen: SettingsScreen},
//Add MainTab as a screen
MainTab: {screen: MainTabBar}
},
...
);
从您的SigninScreen:this.props.navigation.navigate()
导航到“MainTab”作为routeName。
这是一篇很好的文章来阅读React-Navigation : Stack Navigator inside Tab Navigator inside Drawer Navigator
快乐编码:)