本站文章均为 李华明Himi 原创
width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2248.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">
今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：Navigator
一：Navigator
对于页面导航其实主要功能就是：每个页面都知道本身应该切换到哪个页面，并且切到的页面会记录从哪里来，如果要返回的话，知道返回到哪个页面。这一切都不需要再用逻辑管理！而且每个页面之间也可以进行参数传递，很方便的组件。废话不多说：先上示例代码：
首先我们导入 Navigator 组件：
import React , { . . . Navigator , . . . } from 'react-native' ; |
使用方式：
render ( ) { return ( < Navigator initialRoute = { { name : 'FirstPage' , component : FirstPage } } configureScene = { ( route ) = > { return Navigator . SceneConfigs . HorizontalSwipeJump ; } } renderScene = { ( route , navigator ) = > { let Component = route . component ; return < Component { . . . route . params } navigator = { navigator } / > } } / > ) } |
上面的代码，初始化了导航组件，且设置默认显示页面为 FirstPage，这里需要注意两点：
1. 我们主要关注 Navigator 里 initialRoute 中的 两个参数：
name: 组件名
component: 组件Class名
Himi导入FirstPage时如下：
import FirstPage from './FirstPage' |
所以 name 和 component 都填写的为FirstPage
2. <Component {…route.params} navigator={navigator} />
上面这一行是将navigator作为props进行传递
3. Navigator.SceneConfigs.HorizontalSwipeJump
上面一行是设置页面切换之间的动画效果，更多效果查看源文件：
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
下面我们看下FirstPage.js
import React , { AppRegistry , Component , View , Text , StyleSheet , TouchableHighlight , } from 'react-native' ;
import SecondPage from './SecondPage' ;
class FirstPage extends React . Component { constructor ( props ) { super ( props ) ; this . state = { } ;
}
nextEvent ( ) { const { navigator } = this . props ; if ( navigator ) { navigator . push ( { name : 'SecondPage' , component : SecondPage , params : { titleText : '' } } ) } } render ( ) { return ( < View style = { styles . himiViewStyle } > < Text style = { styles . himiTextStyle } > Himi React Native 教程 < / Text >
< View style = { styles . himiViewStyle } > < TouchableHighlight underlayColor = '#4169e1' onPress = { this . nextEvent . bind ( this ) } > < Text style = { styles . text } > 点击我进入 [ SecondPage ]个页面 < / Text > < / TouchableHighlight > < / View > < / View > ) } } ;
var styles = StyleSheet . create ( { text : { color : '#f00' , fontSize : 20 , } , himiViewStyle : { flex : 1 , flexDirection : 'column' , justifyContent : 'center' , alignItems : 'center' , backgroundColor : '#F5FCFF' , } , himiTextStyle : { color : '#f00' , fontSize : 30 , marginTop : 70 , } ,
} ) ; module . exports = FirstPage ; |
这里我们主要看 nextEvent 函数内容，
const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。
得到Navigator组件，可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。
下面代码段演示了如何切换到下一个页面：
if ( navigator ) { //判断是否正常接收到传来的导航组件 navigator . push ( { //利用此函数进行切换到指定页面 name : 'SecondPage' , //目标组件名 component : SecondPage , //目标组件Class名 params : { titleText : '' } } ) } |
还需要强调的是params，此参数是页面切换时传入下个页面的参数书写形式。
获取时，直接 this.props.titleText 即可得到，简单、方便。
下面代码段演示如何返回上个页面：
const { navigator } = this . props ; if ( navigator ) { navigator . pop ( ) ; } |
返回上一页面就十分简单了，不多赘述了。
Himi这里为了演示效果，所以下面把 ThreePage.js也给出源码：（最后附上动态效果图）
JavaScript
import React , { AppRegistry , Component , View , Text , Alert , StyleSheet , TouchableHighlight , } from 'react-native' ;
export default class threePage extends React . Component { constructor ( props ) { super ( props ) ; this . state = { } ;
}
backEvent ( ) { const { navigator } = this . props ; if ( navigator ) { navigator . pop ( ) ; } }
render ( ) { return ( < View style = { styles . himiViewStyle } > < Text style = { styles . himiTextStyle } > ThreePage < / Text >
< View style = { styles . himiViewStyle } > < TouchableHighlight underlayColor = '#4169e1' onPress = { this . backEvent . bind ( this ) } > < Text style = { styles . text } > 返回 [ SecondPage ]页面 < / Text > < / TouchableHighlight > < / View > < / View > ) } } ;
var styles = StyleSheet . create ( { text : { color : '#f00' , fontSize : 20 , } , himiViewStyle : { flex : 1 , flexDirection : 'column' , justifyContent : 'center' , alignItems : 'center' , backgroundColor : '#F5FCFF' , } , himiTextStyle : { color : '#f00' , fontSize : 30 , marginTop : 70 , } ,
} ) ; |
运行效果图：（点击查看动态效果）
从上图效果可以看出，切换之间的页面可以直接通过手势滑动进行切换～:)
