一個(gè)react-native項(xiàng)目，創(chuàng)建之后會(huì)index.ios和index.android兩個(gè)入口。我們通過(guò)

require('./src/app');

在src/app對(duì)界面進(jìn)行渲染，在在安卓或者ios平臺(tái)，都會(huì)統(tǒng)一跳轉(zhuǎn)到app.js文件

以前是在做android開(kāi)發(fā)，界面的跳轉(zhuǎn)在本頁(yè)面，通過(guò)點(diǎn)擊事件嗯監(jiān)聽(tīng)，通過(guò)Intent皆可以直接跳轉(zhuǎn)界面。但是在RN中，界面的跳轉(zhuǎn)需要我們通過(guò)Navigator進(jìn)行跳轉(zhuǎn)。如果你們運(yùn)行我下面的代碼，你可能會(huì)有疑問(wèn)，為什么兩個(gè)文件只有一個(gè)界面。
因?yàn)槲覀僡pp.js這個(gè)文件是應(yīng)用的入口，在這個(gè)入口里，我們做了一件事，Navigator這個(gè)界面跳轉(zhuǎn)的工具注入到項(xiàng)目中,更改下面的代碼，可以跳轉(zhuǎn)到main.js。也就是你整個(gè)app要進(jìn)入的主界面。

import main from './View/main'

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

這樣我們?cè)谝院蟮慕缑嬷校涂梢酝ㄟ^(guò)this.props.navigator進(jìn)行界面的跳轉(zhuǎn)回退等一系列界面跳轉(zhuǎn)了。

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) { // 有設(shè)置場(chǎng)景
            return route.sceneConfig;
        }
        return Navigator.SceneConfigs.PushFromRight; // 默認(rèn)，右側(cè)彈出
    }

    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="加減數(shù)量控件" onPress={() => {
                    this.plus()
                }}/>
            </View>
        );
    }


}

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

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

基礎(chǔ)中的基礎(chǔ)，剛學(xué)習(xí)的時(shí)候比較懵，希望能幫助更多小白少走彎路。