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

Question

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

我尝试删除一个默认的选项卡，但没有骰子。有人知道是什么原因造成的吗(或者更准确地说，我做错了什么(？未经编辑的版本可以在上面的链接中找到，我的代码在下面。谢谢你的帮助。

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>
);
}

Answer 1

最佳做法是将呈现不同组件屏幕的函数移动到它们自己的文件中。文件结构可能看起来像功能/屏幕/组件。在测试屏幕的选项卡屏幕上，你的代码中有一个拼写错误，应该是"；component＝｛TestScreen｝"；从组件中删除s。