React 导航 5 - header 未显示

Question

正在尝试更新我的应用以响应导航 5，但遇到了一些问题。

首先，header没有出现。代码片段：

[来自 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 模拟器上的屏幕截图（它在我的 phone 上看起来一样）：

如您所见，header 未显示，选项卡导航不正确，按钮也不正确（它们的背景发生了一些变化）。除了升级到 react-navigation 5..

之外，我没有对应用程序进行任何更改

感谢您的帮助！

Answer 1

选项卡导航器没有 header 支持。您必须将选项卡导航器包装在堆栈导航器中。

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

React 导航 5 - header 未显示

React navigation 5 - header is not shown

react-native

react-navigation-v5