解决 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 的代码在博客园的编辑器里怎么高亮...