我创建了一个虚拟项目来学习。因此,我创建了一个带有按钮的虚拟登录页面,该按钮将我重定向到主应用程序,它是一个 bottomTabs 应用程序。登录屏幕的 topBar 可见,但是当我单击要重定向的按钮时,我看不到任何 topBar,即使我定义了它。
这是我的 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
- 设备信息(模拟器/设备?操作系统版本?调试/发布?):设备,带有 iOS 12.1.4 的 iPhone 7