Navigator导航器
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
/*
* 在ReactNative中,有两个实现导航功能的组件:Navigator和NavigatorIOS
* Navigator 同支持android和ios ; NavgatorIOS支持ios
* NavigatorIOS 相对有更对的属性和方法,在UI方面有更多的设置,如:backButtonIcon backButtonTitled onLeftButtonPress等等
*
* 如果想实现更多自定义,建议使用Navigator
*
* */
//1.实现导航功能,页面切换
//2.实现导航功能, 传值(下一篇)
/*
* 导航器通过路由对象(route)来分辨不同的场景,每个路由对象都对应一个页面组件,开发者设置什么,导航器显示什么,所以route是导航器中重要的一个对象
*
* 三步操作实现导航功能:
* 1.设置路由对象(告诉导航器要显示哪个页面)
* 创建路由对象,对象的内容自定义,但是必须包含该场景需要展示的页面组件
*
* 2.场景渲染配置(告诉导航器我要什么样的页面跳转效果)
*
* 3.渲染场景(告诉导航器如何渲染页面)
* 利用第一步设置的路由对象进行渲染场景
*
* */
//1.定义第一个页面
var FirstPage = React.createClass({
//按钮onPress事件处理方法
pressPush:function () {
//推出下一级页面
//参数是路由对象,不要再次写 三个步骤
var nextRoute = {
component:SecondPage
}
this.props.navigator.push(nextRoute)
},
render:function () {
return(
<View style={[styles.flex,{backgroundColor:"yellow"}]}>
<TouchableOpacity style={styles.btn} onPress={this.pressPush}>
<Text>点击push下一页</Text>
</TouchableOpacity>
</View>
);
}
});
//2.第二个页面
var SecondPage = React.createClass({
pressPop:function () {
//返回上一界面
this.props.navigator.pop()
},
render:function () {
return(
<View style={[styles.flex, {backgroundColor:"cyan"}]}>
<TouchableOpacity onPress={this.pressPop}>
<Text>pop返回上一页</Text>
</TouchableOpacity>
</View>
);
}
});
//
var LessoNavigator = React.createClass({
render:function () {
var rootRoute={
component:FirstPage
};
return(
<Navigator
/*步骤:
* 1. initialRoute
*
* 指定了默认的页面,也就是启动app之后会看到的第一屏幕(启动页)
* 对象的属性是自定义的,这个对象中的内容会在renderScene方法中处理
* 备注:必须包含的属性,component,表示需要渲染的页面组件
*
* */
initialRoute={rootRoute}
initialRoute={{ component: Home, // 要跳转的页面
title:'首页', // 跳转页面导航栏标题
leftButtonTitle:'左边', // 实例化左边按钮
onLeftButtonPress:() => {alert('左边')}, // 左边按钮点击事件
rightButtonTitle:'右边', // 实例化右边按钮
onRightButtonPress:() => {alert('右边')} // 右边按钮点击事件 }}
/*
* 2.configureScene
* 场景渲染的配置 (跳转效果)
*
* 箭头函数
* */
configureScene={(route) => {
//效果:从右侧向左推出
return Navigator.SceneConfigs.PushFromRight;///////////////////////此句没有提示,有问题????
}}
/*
* 3.renderScene
*
* 渲染场景
* 参数:route(第一步创建并设置给导航器的路由对象),navigator(导航器对象)
* 实现:给需要显示的组件设置属性
*
* */
renderScene={(route, navigator ) => {
//从route路由对象中获取页面组件
var Component = route.component;
return(
<Component
navigator={navigator}
route={route}
/>
)
}}
/>
);
}
});
var styles = StyleSheet.create({
flex:{
flex:1,
justifyContent:"center",
alignItems:"center"
},
btn:{
width:150,
height:30,
borderColor:"red",
borderWidth:1,
justifyContent:"center",
alignItems:"center"
}
});