React Navigation 底部选项卡导航器未在 Expo Snack 中呈现新选项卡答案

【问题标题】：React Navigation bottom tab navigator not rendering new tabs in Expo SnackReact Navigation 底部选项卡导航器未在 Expo Snack 中呈现新选项卡
【发布时间】：2020-08-02 17:45:24
【问题描述】：

我从https://reactnavigation.org/docs/tab-based-navigation 找到的基于标签的导航的最小示例开始，我试图添加其他标签。我复制了与示例中两个现有选项卡关联的函数之一，并对其进行了适当的重命名，然后在导出默认函数的 Tab.Navigator 中添加了一个 Tab.Screen。新选项卡将以我给它的名称出现，但是当我单击新选项卡时，函数中的文本不会显示。它显然正在发生变化，因为其他文本消失了，屏幕除了标签栏外只是空白。

我尝试删除默认选项卡之一，但没有骰子。有谁知道可能导致这种情况的原因（或者更准确地说，我做错了什么）？未经编辑的版本可以在上面的链接中找到，我的代码在下面。感谢您的帮助。

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function TestScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Test!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Test" components={TestScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

你使用的第三屏 prop components={TestScreen} 应该只是组件。
您找到解决此问题的方法了吗？
天啊，好久不见了。我认为 Abhishek 上面的评论有所帮助，但我不记得它是否解决了问题（无法将其标记为答案，但我确实给了它一个赞成票，所以它在某种程度上有所帮助）。我会说我已经放弃了 Expo Snack，因为随着我的应用程序变得更加复杂，我遇到了它的行为问题。就好像应用程序被缓存了，所以我所做的更改没有正确注册。但不确定此问题是否与该问题或单独的问题有关。祝你好运。

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

最好将渲染不同组件屏幕的函数移动到它们自己的文件中。文件结构可能看起来像功能/屏幕/组件。测试屏幕的 Tab.Screen 代码中有错字，应该是 "component={TestScreen}" 从组件中删除 s。

【讨论】：