使用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:60,justifyContent:'center',flexDirection:'row'}} onPress={this.startActivity.bind(this)}>
                    <Text style={{width:W,height: 60,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: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

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:45,justifyContent:'center'}} onPress={this.startActivity.bind(this)}>
                    <Text style={{textAlign: 'center',backgroundColor:'#0000ff',height:45,textAlignVertical:'center'}}>{this.props.msg}</Text>
                </TouchableOpacity>
            </View>

        );
    }
}

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

上面两个文件没什么好讲的.

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: 1,
        },
        m5: {
            marginLeft: 5,
            marginRight: 5,
            borderWidth: 1,
            borderColor: '#ddd',
        },
        row: {
            flexDirection: 'row',
        },
        imageGrid: {
            flex: 1,
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'center',
        },
        image: {
            width: 100,
            height: 100,
            margin: 10,
        },
        imgHeight: {
            height: 180,
        },

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

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 就可以获取到数据.