[英]Combine Stack Navigator with Bottom Tab Navigator on React Native
我想知道如何在 app.js 中的 Home Navigator 上将底部选项卡导航器与 Stack Navigator 结合使用这是我的代码
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const navigator = createStackNavigator({
loading: {
screen: Loading,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Welcome: {
screen: Welcome,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
signup: {
screen: Signup,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
login: {
screen: Login,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
InitialRouteName: Loading,
});
const AppContainer = createAppContainer(navigator);
任何建议在此代码中添加底部选项卡导航器? 我想知道如何在 app.js 中将 Tab 底部导航器与堆栈导航器结合使用(使用底部标签导航器调用 home),谢谢
您可以创建一个 tabNavigator 并像任何其他路由一样设置它。
Obs:也适用于 drawerNavigator。
例子:
const MainTab = TabNavigator(tabs, {
initialRouteName: initialRouteName,
tabBarPosition: "bottom",
});
const RootNavigator = StackNavigator(
{
Root: {
screen: MainTab,
navigationOptions: {
headerMode: "none"
}
},
/* Other Screens */
Login: { screen: LoginScreen },
}
)
const AppContainer = createAppContainer(RootNavigator);
Obs:这也适用于 drawerNavigator。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.