React-Native中TabNavigator仅渲染首个标签页问题求助

嘿，我之前在使用react-navigation 1.x beta版本的时候，刚好碰到过和你一模一样的问题！你遇到的情况其实是早期react-navigation的一个常见坑——当多个Tab路由指向同一个组件时，由于组件复用机制的问题，第二个标签页的组件无法正确挂载渲染。第一个标签页正常是因为它是TabNavigator默认初始化加载的页面，组件会被正常实例化，而切换到第二个标签时，框架会认为这是同一个组件实例，不会触发新的挂载流程，导致页面空白，而且还不会抛出报错，确实挺头疼的。

结合你的版本（react-navigation@1.0.0-beta.27），给你几个亲测有效的解决办法：

方法一：给每个Tab创建独立的包装组件 #

这是最稳妥的方案，核心是让每个Tab对应的screen是不同的组件类，避免react-navigation复用同一个实例：

// 给登录页创建两个简单的包装组件，内部都渲染LoginScreen
const LoginTab1 = () => <LoginScreen />;
const LoginTab2 = () => <LoginScreen />;

// 配置TabNavigator
const MainTabNavigator = TabNavigator({
  FirstTab: {
    screen: LoginTab1,
    navigationOptions: {
      tabBarLabel: '标签页1',
    },
  },
  SecondTab: {
    screen: LoginTab2,
    navigationOptions: {
      tabBarLabel: '标签页2',
    },
  },
});

这种方式虽然看起来有点“冗余”，但在早期版本中能彻底解决组件复用导致的渲染问题。

方法二：给每个路由设置唯一的标识键 #

在react-navigation 1.x beta版本中，你可以给每个路由的navigationOptions添加唯一的navigationKey，让框架识别为不同的路由：

const MainTabNavigator = TabNavigator({
  FirstTab: {
    screen: LoginScreen,
    navigationOptions: {
      tabBarLabel: '标签页1',
      navigationKey: 'tab-login-1',
    },
  },
  SecondTab: {
    screen: LoginScreen,
    navigationOptions: {
      tabBarLabel: '标签页2',
      navigationKey: 'tab-login-2',
    },
  },
});

方法三：开启TabNavigator的懒加载 #

你可以尝试将TabNavigator的lazy属性设为true，强制每个标签页在切换时才挂载对应的组件，不过这个方案在某些场景下可能会有性能影响，但可以作为备选尝试：

const MainTabNavigator = TabNavigator(
  {
    // 路由配置...
  },
  {
    lazy: true, // 开启懒加载
    // 其他Tab配置项...
  }
);

你可以先试试方法一，我当时就是用这个方案解决的问题，适配你的版本完全没问题。

内容的提问来源于stack exchange，提问作者L.E.