使用Rreact Native 之Navigator導航器小結--->菜鳥學習

使用Rreact Native 之Navigator導航器小結

Demo介紹

1. 對Navigator的簡單使用,在兩個界面(準确來說是兩個View之間跳轉)

2. OnePage 和 TwoPage 分别建立.js檔案.

   算了直接上代碼.

OnePage.js

/**
 * Created by zhiwei_zhu on 17/1/19.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Dimensions,
    TouchableOpacity,
    ToastAndroid,
    Image,
    Navigator,
} from 'react-native';

import TwoPage from './TwoPage'

const W = Dimensions.get('window').width;
const H = Dimensions.get('window').height;

export default class OnePage extends Component {

    // 構造
    constructor(props) {
        super(props);
        // 初始狀态
        this.state = {
            msg:"我是預設的",
        };
    }

    startActivity(){
        const {nav} = this.props;
        if(nav){
            nav.push({
                name:'TwoPage',
                component:TwoPage,
                params:{
                    msg:"我從第一頁過來的"
                }
            })
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <Text>第一頁</Text>
                <TouchableOpacity style={{width: W,height:,justifyContent:'center',flexDirection:'row'}} onPress={this.startActivity.bind(this)}>
                    <Text style={{width:W,height: ,backgroundColor:'red',alignItems:'center',textAlignVertical:'center',textAlign: 'center',}}>{this.props.msg ? this.props.msg : this.state.msg}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

styles = StyleSheet.create({
    container: {
        flex: ,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: ,
        textAlign: 'center',
        margin: ,
    },
});
           

TwoPage.js

/**
 * Created by zhiwei_zhu on 17/1/19.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Dimensions,
    TouchableOpacity,
    ToastAndroid,
    Image,
    Navigator,
} from 'react-native';

import OnePage from "./OnePage"

const W = Dimensions.get('window').width;
const H = Dimensions.get('window').height;



export default class TwoPage extends Component {

    // 構造
    constructor(props) {
        super(props);

        // 初始狀态
        this.state = {};
    }

    startActivity(){
        const {nav} = this.props;
        if(nav){
            nav.push({
                name:"OnePage",
                component:OnePage,
                params:{
                    msg:"我從第二頁過來的"
                }
            })
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>第二頁</Text>
                <TouchableOpacity style={{width: W,height:,justifyContent:'center'}} onPress={this.startActivity.bind(this)}>
                    <Text style={{textAlign: 'center',backgroundColor:'#0000ff',height:,textAlignVertical:'center'}}>{this.props.msg}</Text>
                </TouchableOpacity>
            </View>

        );
    }
}

styles = StyleSheet.create({
    container: {
        flex: ,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: ,
        textAlign: 'center',
        margin: ,
    },
});
           

上面兩個檔案沒什麼好講的.

index.android.js 檔案

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage,
    TextInput,
    Dimensions,
    TouchableOpacity,
    ToastAndroid,
    Vibration,
    Keyboard,
    Alert,
    CameraRoll,
    ListView,
    Image,
    ScrollView,
    Navigator,
} from 'react-native';

import OnePage from "./pages/OnePage"

const W = Dimensions.get('window').width;   //擷取螢幕寬度
const H = Dimensions.get('window').height;   //擷取螢幕高度


export default class PrjeckAsnysState extends Component {

    // 構造
    constructor(props) {
        super(props);

        // 初始狀态
        this.state = {};
    }


    render() {
        return (
            <Navigator initialRoute={{name:"OnePage",component:OnePage}}
                       renderScene={(route,nav)=>{
                           let Components = route.component;
                           return <Components {...route.params} nav={nav}/>
                       }}
                       >
            </Navigator>

        );
    }
}


    styles = StyleSheet.create({
        flex_1: {
            flex: ,
        },
        m5: {
            marginLeft: ,
            marginRight: ,
            borderWidth: ,
            borderColor: '#ddd',
        },
        row: {
            flexDirection: 'row',
        },
        imageGrid: {
            flex: ,
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'center',
        },
        image: {
            width: ,
            height: ,
            margin: ,
        },
        imgHeight: {
            height: ,
        },

        saveImg: {
            flex: ,
            height: ,
            textAlign: 'center',
            marginTop: ,
            color: '#FFF',
            lineHeight: ,
            borderRadius: ,
            marginLeft: ,
            marginRight: ,
            fontWeight: 'bold',
            backgroundColor: '#3BC1FF',
        },
        container: {
            flex: ,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: ,
            textAlign: 'center',
            margin: ,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: ,
        },
    });

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

其中

render() {
        return (
            <Navigator initialRoute={{name:"OnePage",component:OnePage}}
                       renderScene={(route,nav)=>{
                           let Components = route.component;
                           return <Components {...route.params} nav={nav}/>
                       }}
                       >
            </Navigator>

        );
    }
           

initialRoute:屬性表示預設的顯示第一個View或者第一頁, name 為可選的,component對應的是 import OnePage from “./pages/OnePage” 導入的名字.

renderScene:通過把導航器傳入到下一個頁面的,并通過props的方式把要傳遞的參數傳遞到下一頁.之後在下一個頁面直接通過 cons{nav} = this.props 即可,nav就是導航器本身.

傳遞到下一個頁面的的參數即可通過以下方式擷取并傳參.

startActivity(){
        const {nav} = this.props;
        if(nav){
            nav.push({
                name:'TwoPage',
                component:TwoPage,
                params:{
                    msg:"我從第一頁過來的"
                }
            })
        }
    }
           

params 可以是多個,再下一頁擷取直接 直接 this.props.msg 就可以擷取到資料.