React-Native 中 react-navigation 简单

来源：互联网发布：微博个性域名二次修改编辑：程序博客网时间：2024/05/25 05:34

1. 其详细的内容可以参照 http://blog.csdn.net/u013718120/article/details/72357698

2.导航栏的简单方法

3.创建两个js文件，第一个是开始界面（AllMine.js）,跳转到的界面（Demo.js）

3.1 AllMine.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Button,} from 'react-native';//导入包import { StackNavigator } from 'react-navigation';var Home = require('../Home/AllHome');var Demo = require('../Home/Demo');var Mine = React.createClass({    render() {        //默认的方法调用        const { navigate } = this.props.navigation;        return (            <View style={styles.container}>                <Text style={styles.welcome}>                    我的                </Text>                {/* 点击以后跳转，{name: 'Lucy'} 传的数据 */}                <Button                    onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}                    title="Go"                />            </View>        );    },});/** * 设置其属性 */const SimpleApp  = StackNavigator(    {        //这个是开始页面        Home: { screen: Mine },        //跳转的地方        Profile: {            path: 'people/:name',            screen: Demo,        },    },    {        navigationOptions:{            headerBackTitle:null,            headerTintColor:'#333333',            showIcon:true,            swipeEnabled:false,            animationEnabled:false,            title : '我的',        },        mode:'card',    });const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});module.exports = SimpleApp;

3.2 Demo.js

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';import { StackNavigator } from 'react-navigation';var Demo = React.createClass({    render() {        return (            <View style={styles.container}>                <Text style={styles.welcome}>                    {/*  上个界面传过的数据*/}                    {this.props.navigation.state.params.name}                </Text>            </View>        );    }});const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});module.exports = Demo;

阅读全文

0 0