当我尝试在堆栈导航器中使用选项卡导航器时,选项卡导航器不可见。除非我在选项卡导航器上方添加文本。
这是我的带有堆栈导航器的 App.js。
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer theme={DarkTheme}>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{headerShown: false}} />
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{headerShown: false}} />
<Stack.Screen
name="AddItem"
component={AddItemScreen}
options={{headerShown:false}} />
</Stack.Navigator>
</NavigationContainer>
);
};
这是我的带有标签导航器的主屏幕
export default HomeScreen = ({navigation}) => {
return (
<View style={{alignSelf: 'baseline'}}>
<TabNavigation />
</View>
)
}
最后,这是我的 TabNavigator。
const Tabs = createMaterialTopTabNavigator();
export default function TabNavigation(){
return(
<NavigationContainer independent={true} theme={DarkTheme}>
<Tabs.Navigator>
<Tabs.Screen name="Todo" component={TodoView} />
<Tabs.Screen name="Completed" component={CompletedView} />
</Tabs.Navigator>
</NavigationContainer>
);
}
目前我得到一个空白的黑屏。当我在选项卡导航器上添加一个文本块时,如下所示:
export default HomeScreen = ({navigation}) => {
return (
<View style={{alignSelf: 'baseline'}}>
<Text>Test</Text>
<TabNavigation />
</View>
)
}
我得到以下信息:
仍然不完美(标签没有显示),但至少它显示了一些东西。任何帮助表示赞赏!