React Native 实现界面跳转 0.42版本

一个react-native项目，创建之后会index.ios和index.android两个入口。我们通过

require('./src/app');

在src/app对界面进行渲染，在在安卓或者ios平台，都会统一跳转到app.js文件

以前是在做android开发，界面的跳转在本页面，通过点击事件嗯监听，通过Intent皆可以直接跳转界面。但是在RN中，界面的跳转需要我们通过Navigator进行跳转。如果你们运行我下面的代码，你可能会有疑问，为什么两个文件只有一个界面。
因为我们app.js这个文件是应用的入口，在这个入口里，我们做了一件事，Navigator这个界面跳转的工具注入到项目中,更改下面的代码，可以跳转到main.js。也就是你整个app要进入的主界面。

import main from './View/main'

initialRoute={{id: 'main', component: main}}

这样我们在以后的界面中，就可以通过this.props.navigator进行界面的跳转回退等一系列界面跳转了。

src/app.js 文件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button,
    Navigator
} from 'react-native';

import main from './View/main'



export default class tipsi extends Component {


    render() {
        return (

            <Navigator
                initialRoute={{id: 'main', component: main}}
                configureScene={this.configureScene}
                renderScene={this.renderScene}
            />


        );
    }

    configureScene(route, routeStack) {
        if (route.sceneConfig) { // 有设置场景
            return route.sceneConfig;
        }
        return Navigator.SceneConfigs.PushFromRight; // 默认，右侧弹出
    }

    renderScene(route, navigator) {
        return <route.component {...route.passProps} navigator= {navigator}/>;
    }
}

AppRegistry.registerComponent('tipsi', () => tipsi);

src/view/main.js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button,
    Navigator
} from 'react-native';


import Counter from './Counter'


export default class tipsi extends Component {


    plus() {
        this.props.navigator.push({
            component: Counter
        })
    }


    render() {
        return (


            <View style={styles.container}>
                <Button title="加减数量控件" onPress={() => {
                    this.plus()
                }}/>
            </View>
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

AppRegistry.registerComponent('tipsi', () => tipsi);

基础中的基础，刚学习的时候比较懵，希望能帮助更多小白少走弯路。