NavigatorIOS

使用 NavigatorIOS，我们需要给他指定一个路由，这样它才能知道显示哪个页面

 

实例化 Navigator 需要2个必要的属性 —— initialRoute 和 renderSence，它们的作用分别是告诉导航器需要渲染的场景、根据路由描述渲染出来

 

 class FirstPage extends Component{
     render(){
         return(
             <View style={styles.container}>
                 <TouchableOpacity
                     onPress={()=>{this.props.navigator.push({
                         component:SecondPage,   // 需要跳转的页面
                         title:'跳转的界面'       // 跳转页面导航栏标题
                     })}}
                 >
                     <Text style={{backgroundColor:"red"}}>点击 push</Text>
                 </TouchableOpacity>

             </View>
         )

     }
 }

 class SecondPage extends Component{

     render(){
         return(
             <View style={[styles.container ,{backgroundColor:"cyan"}]}>
                <TouchableOpacity
                    onPress={()=>{this.props.navigator.pop()}}
                >
                    <Text style={{backgroundColor:"red"}}>点击 pop</Text>
                </TouchableOpacity>
                 
                 
             </View>
         )

     }

 }



export default class App extends Component<{}> {


     render(){

         return(
             <NavigatorIOS
                 initialRoute={{
                     component:FirstPage,//要跳转的板块
                     title:"第一页",
                     leftButtonTitle:'左边',   // 实例化左边按钮
                     onLeftButtonPress:() => {alert('左边')},  // 左边按钮点击事件
                     rightButtonTitle:'右边',  // 实例化右边按钮
                     onRightButtonPress:() => {alert('右边')} , // 右边按钮点击事件
                    //当然图片设置的方式也是一样的，只需要调用 leftButtonIcon 和 'rightButtonIcon` 即可

                 }}
                 
                 renderScene={(route,navigator) => { // 将板块生成具体的组件
                     let Component = route.component;// 获取路由内的板块
                     return <Component {...route.params} navigator={navigator} />    // 根据板块生成具体组件

                 }}

                 //属性
                 // navigationBarHidden={true}      // 隐藏导航栏
                 shadowHidden={true}     // 隐藏导航栏下面的阴影
                 tintColor='orange'  // 按钮的颜色
                 titleTextColor='green'  // 导航栏标题的文字颜色
                 translucent={false}     // 决定导航栏是否半透明(注：当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖)
                 interactivePopGestureEnabled={false}    // 决定是否启用滑动返回手势

                 style={{flex:1}}// 此项不设置,创建的导航控制器只能看见导航条而看不到界面


             />

         )

     }

 

}



var styles = StyleSheet.create({
    container:{
        backgroundColor:"yellow",
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }

});

//方法
 /*
 * push(route)：导航器跳转到一个新的路由
pop()：回到上一页
popN()：回到N页之前。当 N=1 的时候，效果和 pop() 一样
replace(route)：替换当前页的路由，并立即加载新路由的视图
replacePrevious(route)：替换上一页的路由/视图
replacePreviousAndPop(route)：替换上一页的路由/视图并且立即切换回上一页
resetTO(route)：替换最顶级的路由并且回到它
replaceAtIndex：替换指定路由
popToRoute(route)：一直回到某个指定的路由
popToTop()：回到最顶层的路由
 *
 * */