在 React Native expo 移动应用程序中，BottomTabNavigator 位于顶部而不是底部

Question

我正在开发一个移动反应原生 expo 应用程序。 我正在使用 BottomTabNavigator (NavigationContainer)。 顾名思义，它应该出现在底部，但它错误地出现在顶部。

我已经在屏幕顶部有另一个图像（logo.png），并且导航栏（或 NavigationContainer）也出现在顶部并重叠在图像上方。 请帮我解决这个问题。 请参阅下面的代码：

在下面的代码中MyTabs是从createBottomTabNavigator()创建的导航器。 这错误地出现在屏幕顶部。

import React from 'react';
import { Image,  StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import logo from './assets/logo.png';
import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './navigator/AppNavigator';

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
        <View>
            <View style={styles.container}>
                <Image source={logo} style={{ width: 100, height: 100 }} />

                <Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>
                To share a photo from your phone with a friend or anyone, just press the button below!
                </Text>
            </View>

            <View >
                <NavigationContainer >
                        <MyTabs />        // This is incorrectly coming on top of screen.
                </NavigationContainer>
            </View>

        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
     alignItems: 'center',
    // justifyContent: 'center',
  },
});

Answer 1

NavigationContainer应该是App中最外层的组件。 然后包装Tab.Navigator组件（在您的情况下MyTabs ），您可以在其中创建链接到每个组件的选项卡。 在您的组件内部，您可以利用SafeAreaView在屏幕顶部显示图像。 在 react native 中，任何类型的导航方案都必须成为层次结构中最顶层的组件，包装组件的 rest。 我在下面更改了您的代码：

import React from 'react';
import { Image,  StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export default function App() {
  const Tab = createBottomTabNavigator()

  return (
    <NavigationContainer >
      <Tab.Navigator>  
        <Tab.Screen name="Home" component={myComponent} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const myComponent = () => {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
      <View>
        <View style={styles.container}>
          <Image source={require('@expo/snack-static/react-native-logo.png')} style={{ width: 100, height: 100 }} />
          <Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>To share a photo from your phone with a friend or anyone, just press the button below!</Text>
        </View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
     alignItems: 'center',
    // justifyContent: 'center',
  },
});