---

该文章主要讲述StackNavigator的使用，用来实现页面之间的跳转。

工程目录

页面跳转

App.js

import React, {Component} from 'react';

import Pages from "./js/stacknavigator/Pages";


type Props = {};

export default class App extends Component<Props> {
    render() {
        return (
            <Pages/>
        )
    }
}

React Native的入口App.js中涉及到了组件Pages，根据import，我们可以看到是Pages.js界面。

Pages.js

import React,{Component} from 'react';

import  FirstPage from './FirstPage';
import  SecondPage from './SecondPage';
import  ThirdPage from './ThirdPage';
import  FourthPage from './FourthPage';

import {
    StackNavigator,
} from 'react-navigation';

export default class Pages extends Component{

    constructor(props){
        super(props);
    }
    render(){
        return(
            <SimpleAppNavigator/>
        )
    }
}

const SimpleAppNavigator = StackNavigator({
    page1:{screen:FirstPage},
    page2:{screen:SecondPage},
    page3:{screen:ThirdPage},
    page4:{screen:FourthPage},
},{
    initialRouteName:'page1',
});

注：上面的代码重点就是SimpleAppNavigator组建，SimpleAppNavigator是React Native提供的StackNavigator，page1、page2、page3、page4是路由的名字，screen的值对应的跳转页面，initialRouteName表示第一个初始化的路由页面是哪一个。

FirstPage.js

import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native'

export default class FirstPage extends Component<Props> {
    static navigationOptions = {
        title: 'page 1',
    };

    render() {
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>
                <Text style={styles.welcome}> This is First Page!</Text>
                <TouchableOpacity onPress={() => {
                    navigate('page2',{message:'Hello,我是page1!'})
                }}>
                    <Text style={styles.textView}>Go to second page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page3',{message:'Hello,我是page1!'})
                }}>
                    <Text style={styles.textView}>Go to Third page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page4',{message:'Hello,我是page1!'})
                }}>
                    <Text style={styles.textView}>Go to Fourth page</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5fcff',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color: 'red'
    }
})

对应的效果图：

SecondPage.js

import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native'

export default class ThirdPage extends Component<Props> {
    static navigationOptions = {
        title: 'page 2',
    };

    render() {
        const {navigate} = this.props.navigation;
        const {params} = this.props.navigation.state;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}> This is Second Page!</Text>
                <TouchableOpacity onPress={() => {
                    this.props.navigation.goBack()
                }}>
                    <Text style={styles.textView}>
                        Touch me to go back!
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page1')
                }}>
                    <Text style={styles.textView}>Go to First page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page3')
                }}>
                    <Text style={styles.textView}>Go to Third page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page4')
                }}>
                    <Text style={styles.textView}>Go to Fourth page</Text>
                </TouchableOpacity>

                <Text style={styles.textView}>
                    {'传来的参数是：'+params.message}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5fcff',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color: 'red'
    }
})

对应的效果图：

ThirdPage.js

import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native'

export default class ThirdPage extends Component<Props> {
    static navigationOptions = {
        title: 'page 3',
    };

    render() {
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>
                <Text style={styles.welcome}> This is Third Page!</Text>
                <TouchableOpacity onPress={() => {
                    this.props.navigation.goBack()
                }}>
                    <Text style={styles.textView}>
                        Touch me to go back!
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page1')
                }}>
                    <Text style={styles.textView}>Go to First page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page2')
                }}>
                    <Text style={styles.textView}>Go to Second page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page4')
                }}>
                    <Text style={styles.textView}>Go to Fourth page</Text>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5fcff',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color: 'red'
    }
})

对应的效果图：

FourthPage.js

import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native'

export default class FourthPage extends Component<Props> {
    static navigationOptions = {
        title: 'page 4',
    };

    render() {
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>
                <Text style={styles.welcome}> This is Fourth Page!</Text>
                <TouchableOpacity onPress={() => {
                    this.props.navigation.goBack()
                }}>
                    <Text style={styles.textView}>
                        Touch me to go back!
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page1')
                }}>
                    <Text style={styles.textView}>Go to First page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page3')
                }}>
                    <Text style={styles.textView}>Go to Third page</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    navigate('page2')
                }}>
                    <Text style={styles.textView}>Go to Second page</Text>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5fcff',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color: 'red'
    }
})

对应的效果图：

上面的四个页面都类似，代码也很好懂，这里就不多做解释了，有不懂的可以留言。