Блог

Я разрабатываю мобильное приложение 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',
  },
});

 

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