react-native NavigatorIOS 使用方法

import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
NavigatorIOS,
TouchableOpacity
} from 'react-native';

export default class App extends Component<Props> {
render() {
return (
<NavigatorIOS
style={{flex: 1}} // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
interactivePopGestureEnabled={true}//决定是否启用滑动返回手势。
translucent={true}//决定导航条是否半透明
initialRoute={{//初始化路由
component: Home,//路由的根视图
title: '首页',//标题
}}
/>
);
}
}
class Home extends Component {
_onPressView(nextRoute) {
this.props.navigator.push(nextRoute)
}

render() {
const nextRoute = {
component: Detail,//目的地视图
title: '详情',//目的地标题
titleTextColor: 'blue',//标题颜色
shadowHidden: true,//决定是否要隐藏1像素的阴影
barTintColor: 'white',//导航条的背景颜色
tintColor: 'orange',  // 按钮的颜色
leftButtonTitle: '返回',//导航条的左按钮
onLeftButtonPress: () => {
this.props.navigator.pop()
},
rightButtonTitle: '相册',//导航条的右按钮
onRightButtonPress: () => {//导航条右按钮触发事件
alert('没有该照片');
},
passProps: {myProp: 'bar'}
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this._onPressView(nextRoute)
}}
>
<Text>{"详情！"}</Text>
</TouchableOpacity>
</View>
)
}
}
class Detail extends Component {

render() {
return (
<View style={[styles.container, {backgroundColor: "green"}]}>
<TouchableOpacity
onPress={() => {
this.props.navigator.pop()
}}
>
<Text>{"首页！"}</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}
});