react-native底部选项卡不apper我怎么能修复，而我使用TabsNavigator和Stack.导航器会合.

Question

我想在TabsNavigator中使用制表符，但它不起作用。除了标题Main之外，屏幕上没有显示底部的选项卡。当我使用;

const App = () => {
return (
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Home" component={ChatList} />
<Tabs.Screen name="Settings" component={Settings} />
</Tabs.Navigator>
</NavigationContainer>
)
}`

它工作，但我想使用TabsNavigator我怎么能那样跑呢

`App.js`
const Stack = createNativeStackNavigator()
const Tabs = createBottomTabNavigator()

in that part I want to control my tabs with tabs.navigator

const TabsNavigator = () => {
<Tabs.Navigator>
<Tabs.Screen name="ChatList" component={ChatList} />
<Tabs.Screen name="Settings" component={Settings} />
</Tabs.Navigator>
}
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
`When I call TabsNavigator in this way it is not working`
<Stack.Screen name="Main" component={TabsNavigator} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;`

Answer 1

const App = () => {
return (
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Home" component={ChatList} />
<Tabs.Screen name="Settings" component={Settings} />
</Tabs.Navigator>
</NavigationContainer>
)
}

只要把{}改成()就行了

const TabsNavigator = () => (
<Tabs.Navigator>
<Tabs.Screen name="ChatList" component={ChatList} />
<Tabs.Screen name="Settings" component={Settings} />
</Tabs.Navigator>
)