#reactjs #react-native #expo #react-navigation
#reactjs #react-native #выставка #react-навигация
Вопрос:
Я разрабатываю мобильное приложение 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',
},
});
Ответ №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',
},
});
Комментарии:
1.
BottomNavigator
связан сSafeAreaView
компонентом, поэтому визуализируются как изображение, так и селектор вкладок. Как я уже сказал,NavigationContainer
предполагается, что это самый верхний компонент в иерархии React DOM, охватывающий остальные компоненты. Вы связываете каждый из экранов в навигаторе вкладок, чтобы отобразить ваши компоненты. Ничто не должно отображаться вместе с навигатором, как вы изначально опубликовали. Однако, если вы настаиваете, вы можете попробовать использовать селекторы CSS, чтобы привязать навигатор к нижней части.2. Я довольно ограничен в том, насколько я могу вам помочь, основываясь на приведенном выше примере кода, тем более, что наличие a
Tab.Navigator
в отдельном компоненте не сработало для меня, как для вас сmyTabs
компонентом. Попробуйте связать фрагмент вашей работы, и, возможно, я смогу вам лучше помочь. Это фрагмент моего кода выше: snack.expo.io/@kaushalp/thoughtful-soda .3. Отлично! Если этот пост помог, пожалуйста, проголосуйте и отметьте как ответ 🙂