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頁面當做元件引用進來，相信大家都知道怎麼做，不再贅述，如有不清楚的 請到這裡來： 

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

附上專案結構：

執行效果如下：