React Native Simple Router是一款第三方导航组件。你可以通过它进行合理的视图组织。
安装
进入你的项目目录，如过没有初始化项目可以react-native init your_project，然后在项目目录安装react-native-simple-router。
npm install react-native-simple-router --save
使用
import Router from 'react-native-simple-router';
修改的你的index.ios.js,如果是Android修改对应文件即可。
import React,{ StyleSheet } from 'react-native';
// 初始化页面
class HelloPage extends React.Component {
render() {
return <Text>Hello world!</Text>;
}
}
const styles = StyleSheet.create({
header: {
backgroundColor: '#5cafec',},});
// 在这里定义你的路由
// - 其中name 将会成会顶部导航条的标题内容
// - `component`用于渲染页面的组件
const firstRoute = {
name: 'Welcome!',component: HelloPage,};
class MyApp extends React.Component {
render() {
return (
<Router
firstRoute={firstRoute}
headerStyle={styles.header}
/>
);
}
}
AppRegistry.registerComponent('routerTest',() => MyApp);
接下来你可以加入更多页面，你可以通过this.props.toRoute()导航至另外一个组件。
'use strict';
var React = require('react-native');
var {
StyleSheet,View,Text,Image,TextInput,Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
class Next extends Component {
constructor(props){
super(props);
}
render() {
var me = this;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Next Page!
</Text>
</View>
);
}
}
module.exports = Next;
index.ios.js中主要加入下面方法
import React,{ StyleSheet,PropTypes } from 'react-native';
var Next = require('./next');
const propTypes = {
toRoute: PropTypes.func.isrequired,};
class HelloPage extends React.Component {
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
}
nextPage() {
this.props.toRoute({
name: "next screen",component: Next
});
}
render() {
return (
<View>
<TouchableHighlight onPress={this.nextPage} underlayColor="transparent">
<Text>Next page please!</Text>
</TouchableHighlight>
</View>
);
}
}
HelloPage.propTypes = propTypes;
这个时候我们点击 next page 即可导航至next页面。请记住this.props.toRoute()必须在顶级路由中使用，如果你的链接潜入在多个组件中，你必须确保它能够冒泡到它的父级。
配置
<Router /> 可以配置下面的属性:
firstRoute(必须): 你导航的首页
headerStyle： 改变你导航条的背景样式
titleStyle：改变导航条里的文字样式
bgStyle： 改变所有路由的背景样式
borderBottomWidth： 底部导航条的宽度
backButtonComponent：默认导航条会呈现一个back 文本的返回按钮，当然你可以自定义设置的组件
customAction：
hideNavigationBar： 隐藏导航条
statusBarProps：默认获取状态栏的
props,可以参考StatusBar Docs.
+
this.props.toRoute()需要传入一个对象作为参数设置 。
component(必须)：需要渲染的组件
leftCorner： 从导航左边开始开始渲染
rightCorner：则是从右边渲染相关组件
titleComponent：指定一个组件用于替换标题，类似Ins的第一页
headerStyle： 指定新渲染组件的导航条样式，你可以指定一个背景色，然后路由转换是会平滑过渡
passProps：带入一组参数，通常是一个对象
key-value给新的组件titleProps：如果你设置了title为一个组件，这样你可以把titleProps的值传入进去。
sceneConfig：控制转场动画，常见的参数如下:
Navigator.SceneConfigs.FadeAndroid Navigator.SceneConfigs.FloatFromBottom Navigator.SceneConfigs.FloatFromBottomAndroid Navigator.SceneConfigs.FloatFromLeft Navigator.SceneConfigs.FloatFromRight Navigator.SceneConfigs.HorizontalSwipeJump Navigator.SceneConfigs.PushFromRight Navigator.SceneConfigs.VerticalDownSwipeJump Navigator.SceneConfigs.VerticalUpSwipeJump
this.props.replaceRoute的参数设置和toRoute一致，但是二者的区别在于toRoute会加入到你的堆栈中，而replaceRoute它将会替换当前所在的路由。
如果你是在登录或者登出的功能，使用replaceRoute会好过直接再导航至该路由。
this.props.resetToRoute与toRoute()传入的参数一致，而它的差异在于，它会替换掉当前的路由并且清空导航。如果你登录成功或者注册成功后，你并不希望退后，使用resetToRoute则会非常有用。
案例
Twitter App
一个简单的模仿twitter 的 应用，你可以直接使用它，并借鉴它的写法。
import React,{ AppRegistry } from 'react-native';
import TwitterApp from './node_modules/react-native-simple-router/examples/twitter-example';
AppRegistry.registerComponent('routerTest',() => TwitterApp);
Explorer app
在node_modules/react-native-simple-router/examples/Explorer里面还有一个Demo,安装依赖后便可以运行.
我们可以大致参考作者的目录架构
+ images/
+ style
+ css
+ icons
+ components
+ service
+ pages
+ ios
+ android
- index.ios.js
- index.android.js
...
反馈
react-native-simple-router实际来源于react-native-router，但是作者不再更新，因此我们迁移过来，不过你依旧可以在原来issues找到你有可能遇到的问题的答案。
其他组件推荐
本文同步自己的博客：http://www.jackpu.com/shi-yong-react-native-simple-router-zu-zhi-ni-de-react-native-ye-mian/
原文链接：https://www.f2er.com/react/307026.html