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

Question

我正在开发一个移动反应原生博览会应用程序。我使用的是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中，任何类型的导航方案都必须成为层次结构中最顶层的组件，包装其他组件。我已经修改了你的代码如下:

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