React Navigation 5-标头未显示

debugcn 发表于 Dev

优素福

尝试更新我的应用以响应导航5并遇到一些问题。

首先，标题不显示。代码片段：

[来自App.js]

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator >
        <Tab.Screen name="Home" component={HomeScreen} options={{ title:'some title' }}/>
        <Tab.Screen name="Upload" component={UploadScreen} />
        <Tab.Screen name="Find" component={FindScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

以及当前屏幕的样式：

<View style={{flex:1, flexDirection:'column',justifyContent:'space-between'}}>

这是一个Android模拟器上的应用程序的屏幕截图（在我的手机上看起来相同）：

如您所见，没有显示标题，选项卡导航不正确，按钮也是如此（其背景有所更改）。除了升级到反应导航5，我没有在应用程序中进行任何更改。

谢谢您的帮助！

亚尼克·贝兰格（Yanick Belanger）

选项卡导航器不支持标题。您必须将选项卡导航器包装在堆栈导航器中。

import { createStackNavigator } from "@react-navigation/stack";
// ... other imports

export const App = () => {
    return (
        <NavigationContainer>
            <StackNavigator />
        </NavigationContainer>
    );
}

const Stack = createStackNavigator();
const StackNavigator = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Tabs" component={TabNavigator} />
        </Stack.Navigator>
    );
}

const Tab = createTabNavigator();
const TabNavigator = () => {
    return (
        <Tab.Navigator >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Upload" component={UploadScreen} />
            <Tab.Screen name="Find" component={FindScreen} />
        </Tab.Navigator>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。