解决 react-native 嵌套路由 warning
本文地址:https://www.cnblogs.com/veinyin/p/13455113.html
关于嵌套路由报 warning 的问题,官方文档其实在常见问题中已经给出了解决方法,查看
但是是 class component 的写法
export default class App extends React.Component { render() { /* In the root component we are rendering the app navigator */ return <AppContainer />; } } const AuthenticationNavigator = createStackNavigator({ SignIn: SignInScreen, ForgotPassword: ForgotPasswordScreen, }); class AuthenticationScreen extends React.Component { static router = AuthenticationNavigator.router; render() { return <AuthenticationNavigator navigation={this.props.navigation} />; } } const AppNavigator = createSwitchNavigator({ Auth: AuthenticationScreen, // This screen renders a navigator! Home: HomeScreen, }); const AppContainer = createAppContainer(AppNavigator);
那么 function component 如何实现呢,如下图所示
打开APP后,先展示欢迎页,再进入主页面 home,home里定义了底部的四个 tab导航
路由嵌套如下
在导航文件中定义 welcome 页和 home 页切换的导航,在 home 页定义底部导航
当然,home 中不能在创建导航之后,直接使用 createAppContainer 包一层之后渲染,这样会出现路由嵌套的警告
Home.js 中这样写就可以了
// 预设导航,定义了底部四个 tab 导航,有点长就不展示了 const TABS = { Popular: {...}, Trending: {...}, ... } const DynamicNavigator = () => { // 从预设导航中选出要渲染的 const { Popular, Trending } = TABS // 把要渲染的组装成新的对象,用作 createBottomTabNavigator 的第一个参数 const tabs = { Popular, Trending } return createBottomTabNavigator(tabs) } const DynamicNav = DynamicNavigator() const Home = (props) => { return <DynamicNav navigation={props.navigation} /> } Home.router = DynamicNav.router
当然,最好的实现是将 DynamicNavigator 单独拎到一个文件中
DynamicNavigator.js
// 预设导航,定义了底部四个 tab 导航,有点长就不展示了 const TABS = { Popular: {...}, Trending: {...}, ... } const DynamicNavigator = () => { // 从预设导航中选出要渲染的 const { Popular, Trending } = TABS // 把要渲染的组装成新的对象,用作 createBottomTabNavigator 的第一个参数 const tabs = { Popular, Trending } return createBottomTabNavigator(tabs) } // 注意,一定要导出 DynamicNavigator 执行的结果,而不是这个函数! export default DynamicNavigator()
Home.js
import DynamicNav from '../navigator/DynamicNav' const Home = (props) => { return <DynamicNav navigation={props.navigation} /> } Home.router = DynamicNav.router
效果
最后,有没有好心人能告诉我 RN 的代码在博客园的编辑器里怎么高亮...
本文地址:https://www.cnblogs.com/veinyin/p/13455113.html
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。