Я создаю фиктивный проект для изучения.Итак, я создаю фиктивную страницу входа в систему с кнопкой, которая перенаправляет меня в основное приложение, которое является приложением 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 Native версия: 0.57.5
- Платформа (ы) (iOS, Android или оба?): IOS
- Информация об устройстве (Симулятор / Устройство? Версия ОС? Отладка / Выпуск?): Устройство iPhone 7 с iOS 12.1.4