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

Question

我正在开发一个移动 React Native 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 然后在屏幕顶部显示图像。任何类型的导航方案都必须成为本机层次结构中最顶层的组件，包装其余组件。我已经在下面更改了您的代码：

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

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

BottomTabNavigator coming on top instead of bottom in React Native expo mobile app

reactjs

react-native

react-navigation

expo