react-navigation之StackNavigator使用方法及附上超级详细样例代码

react-navigation 之 StackNavigator

网上虽说有很多篇关于react-navigation的使用说明的文章和博客，不过我找了大半天也不见详细具体的使用方法，大部分都是介绍种种属性的，为此鄙人自告奋勇，整理了一份比较详细的有关react-navigation的使用样例代码，本篇文章先介绍StackNavigator的使用方法。

StackNavigator

实现不同页面之间的跳转

限于篇幅，有关StackNavigator的各种属性以及页面间传值这里不再赘述，代码里已经写了，请自行百度或谷歌。

不多说，先上代码，先干为敬，代码下方会有详细说明：

说明：样例的版本是0.53

下面代码粘贴即可使用

1. App.js

 

import React, { Component } from 'react';
import {
  StyleSheet,
} from 'react-native';
import Pages from './src/Pages';
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Pages/>
    );
  }
}

App.js大家都很熟悉，react native的启动页，这里将所有页面的集成路由页Pages.js页面当做组件引用进来，相信大家都知道怎么做，不再赘述，如有不清楚的 请到这里来： react native 自定义组件以及引用

2. 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',
 });

（下面的说明不再是样例中的代码）

Pages.js是所有的页面的集合页面：

(1) 将所有的子页面导入进来

 

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

(2) 然后通过StackNavigator注册路由

 

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

(3) 然后在render里返回 SimpleAPPNavigator即可：

 

render(){
        return(
            <SimpleAppNavigator/>
        )
    }

 

3. FirstPage.js

 

 

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
export default class FirstPage extends Component {
    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'
    },
});

4. SecondPage.js

 

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
export default class SecondPage 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'
    },
});

5. 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 second 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'
    },
});

6. 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 second page
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        navigate('page3');
                    }}
                >
                    <Text style={styles.textView}>
                        Go to third page
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        navigate('page1');
                    }}
                >
                    <Text style={styles.textView}>
                        Go to First 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'
    },
});

附上项目结构：

运行效果如下：