Перемещение из стека в нижние вкладки приводит к исчезновению верхней панели в реагирующей нативной навигации 2
Я создаю фиктивный проект, чтобы учиться. Итак, я создаю фиктивную страницу входа в систему с кнопкой, которая перенаправляет меня в основное приложение, которое является приложением bottomTabs. На экране входа в систему отображается верхняя панель, но затем, когда я нажимаю кнопку для перенаправления, я не вижу никакой верхней панели, даже когда я ее определил.
Это мой App.js
import { Navigation } from 'react-native-navigation';
import AuthScreen from './src/screens/Auth/Auth';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
// Register screens
Navigation.registerComponent("awesome-places.AuthScreen", () => AuthScreen);
Navigation.registerComponent("awesome-places.SharePlaceScreen", () => SharePlaceScreen);
Navigation.registerComponent("awesome-places.FindPlaceScreen", () => FindPlaceScreen);
// Start the app
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'awesome-places.AuthScreen',
options: {
topBar: {
title: {
text: 'Título'
}
}
}
}
}
],
}
}
});
});
Мой компонент AuthScreen это:
import React, {Component} from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import startMainTabs from './../MainTabs/startMainTabs';
export default class AuthScreen extends Component {
loginHandler = () => {
startMainTabs();
}
render() {
return (
<View style={styles.container}>
<Text>AuthScreen</Text>
<Button title="Login" onPress={this.loginHandler}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
margin: 25
}
});
И основной код вкладок:
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = () => {
Promise.all([
Icon.getImageSource('md-map', 30),
Icon.getImageSource('ios-share-alt', 30)
]).then((res) => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
component: {
name: 'awesome-places.SharePlaceScreen',
options: {
topBar: {
visible: true,
title: {
text: 'Título'
}
},
bottomTab: {
fontSize: 12,
text: 'A',
icon: res[0],
}
}
},
},
{
component: {
name: 'awesome-places.FindPlaceScreen',
options: {
topBar: {
visible: true,
title: {
text: 'Título'
}
},
bottomTab: {
fontSize: 12,
text: 'B',
icon: res[1],
}
}
},
},
],
},
}
});
})
}
export default startTabs;
Если это поможет, компоненты, которые я вызываю, точно такие же, а код выглядит так:
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class FindPlaceScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Find Place</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
margin: 25
}
});
Среда, которую я сейчас использую:
- React Native Navigation версия: 2.12.0
- React Родная версия: 0.57.5
- Платформа (ы) (iOS, Android или оба?): IOS
- Информация об устройстве (Симулятор / Устройство? Версия ОС? Отладка / Выпуск?): Устройство, iPhone 7 с iOS 12.1.4
1 ответ
Я изменяю свой файл stratMainTabs на:
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = () => {
Promise.all([
Icon.getImageSource('md-map', 30),
Icon.getImageSource('ios-share-alt', 30)
]).then((res) => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: 'awesome-places.SharePlaceScreen',
options: {
topBar: {
animate: false,
visible: true,
title: {
text: 'Título A'
}
},
bottomTab: {
fontSize: 12,
text: 'A',
icon: res[0],
}
}
},
}
]
}
},
{
stack: {
children: [
{
component: {
name: 'awesome-places.FindPlaceScreen',
options: {
topBar: {
animate: false,
visible: true,
title: {
text: 'Título B'
}
},
bottomTab: {
fontSize: 12,
text: 'B',
icon: res[1],
}
}
},
}
]
}
},
],
},
}
});
})
}
export default startTabs;
По сути, я поместил дочерние элементы внутрь и в стек, а внутри этого стека я добавил tabComponent. И это решает проблему. Может кто-нибудь, пожалуйста, мог бы поделиться, почему это работает?