如何使用 React Native Navigation 解决此问题

Question

我正在尝试创建一个新的 react-native 移动应用程序。但是，当我添加 react native 导航（堆栈，底部）时出现问题。

每当应用第一次加载或第一次打开屏幕时，堆栈导航的标题部分首先展开，然后恢复到正常大小。与底部导航相同，它会扩展并恢复到正常大小。不太确定用英语解释它，但我拍了一个视频并将其转换为 gif，让您清楚地了解这个问题。

安装了最新版本的包

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.1.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.1.1"
  }

Index.js

/**
 * @format
 */
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './app/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
        </View>
    );
}

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

我什至尝试使用旧版本的软件包，但仍然是同样的问题。安卓物理设备和模拟器都试过了。

https://github.com/react-navigation/react-navigation/issues/8446 和 https://github.com/react-navigation/react-navigation/issues/8620 的问题相同

Answer 1

为什么不创建一个自定义的标题组件并将其直接添加到您的屏幕组件中。 react-navigation 标头很难处理。

另外，使用react-native-cli 可以提供灵活性。

Answer 2

我建议不要使用默认的屏幕标题并自己实现它，native-base for react 为您提供了一种很好的方法，并且要删除默认标题，请在反应导航中搜索它，因为我记得您应该通过删除它的道具