(React-Native 学习之六) react-native-router-flux 组件学习(页面间的跳转)

在youtube上看到这个组件的视频，感觉挺好用的.

这是一个导航组件，导航是app中比较重要的内容



github地址

直接跳转的用法，非常直观和简单。看代码，简单的注释一下

//index.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';  //引入两个组件
import PageTwo from './PageTwo';
//用scene这个组件来包裹要导航的组件，initial表示默认加载的
//组件，key的作用就是在路由中注册这个组件，后面要用到这个
//某个组件就用它的key 来代替它,component就是组件
//这个组件自带navbar，title就是navbar的名字
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
)
}
}

下面是两个组件的代码，两个组件之间相互跳转

//PageOne.js 第一个组件

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
//Actions.pageTwo就是根据pageTwo的key来进行导航

export default class PageOne extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text onPress={Actions.pageTwo}>This is PageOne!
//pageTwo中 Actions.PageOne就可以跳转到PageOne
</Text>
</View>
)
}
}

如果要在导航中传递信息可以如下操作

render() {
const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'});
return (
<View style={{margin: 128}}>
<Text onPress={goToPageTwo}>This is PageOne!</Text>
</View>
)
}

//pageTwo可以通过props接受传递内容

{this.props.text}

这是简单的介绍，这个组件还可以完成tabview，modal,sidemenu等工作，相当的厉害。2600多颗星

我把视频放上来，英语的，基本不影响，可以到youtube观看，有英文字母

react-native-router-flux百度网盘下载地址 密码：xnrh

react-native-router-flux百度网盘下载地址 密码：xnrh

这是组件作者的教程

转载：http://www.jianshu.com/p/1f81d0783862