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