运用 react-native-simple-router 构造你的React Native 页面

2019年8月30日 166次阅读 来源: 静逸秋水

《运用 react-native-simple-router 构造你的React Native 页面》

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()导航至别的一个组件。

我们定义别的一个页面next.js,代码很简朴:

'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()须要传入一个对象作为参数设置 。

  • name：路由的称号，也会被用在导航条的文本显现

  • 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://segmentfault.com/a/1190000004660159
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞