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

Posted 2023-03-15

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

【英文标题】：BottomTabNavigator coming on top instead of bottom in React Native expo mobile app

【发布时间】：2021-02-20 17:44:30

【问题描述】：

我正在开发一个移动反应原生 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',
  ,
);

【参考方案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',
  ,
);

【讨论】：

BottomNavigator 链接到 SafeAreaView 组件，因此图像和选项卡选择器都在呈现。就像我说的，NavigationContainer 应该是 React DOM 层次结构中最顶层的组件，包装了其余的组件。您链接选项卡导航器中的每个屏幕以显示您的组件。正如您最初发布的那样，没有任何内容要与导航器一起呈现。但是，如果您坚持，您可以尝试使用 CSS 选择器让导航器锚定到底部。

根据上面的代码示例，我可以为您提供的帮助非常有限，尤其是因为在单独的组件中使用 Tab.Navigator 对我来说并不像它对你那样myTabs 组件。试着把你工作的零食链接起来，也许我能更好地帮助你。这是我上面代码的一个小点：snack.expo.io/@kaushalp/thoughtful-soda.

太棒了！如果这篇文章有帮助，请点赞并标记为答案:)