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

附上項目結構：

運行效果如下：