在youtube上看到这个组件的视频，感觉挺好用的.
这是一个导航组件，导航是app中比较重要的内容
super_simple-2.gif
直接跳转的用法，非常直观和简单。看代码，简单的注释一下
//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接受传递内容
<Text>{this.props.text}</Text>
这是简单的介绍，这个组件还可以完成tabview，modal,sidemenu等工作，相当的厉害。2600多颗星
我把视频放上来，英语的，基本不影响，可以到youtube观看，有英文字母
