React Native 页面跳转react-navigation导航器的使用

啥都不说了 先来效果图

看下入门文档

https://reactnavigation.org/docs/intro/

里面有三个导航器

我现在只用StackNavigator 这个用于页面的跳转

然后上代码

index.android.js

import React from 'react';
import {
    AppRegistry,Text,View,Button,} from 'react-native';
//导入stack导航组件
import {StackNavigator} from 'react-navigation';
import ChatScreen from './ChatScreen'
class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',//标题
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Hello,Chat App!</Text>
                <Button
                    onPress={() => navigate('Chat')}
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}
//导航注册
const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},Chat: { screen: ChatScreen },//新添加的页面
});

AppRegistry.registerComponent('second',() => SimpleApp);

第二个页面

/** * Created by liuml on 2017/9/18. */

import React from 'react';
import {
    AppRegistry,} from 'react-native';
import {StackNavigator} from 'react-navigation';
class ChatScreen extends React.Component {
    static navigationOptions = {
        title: 'Chat with Lucy',};

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <Text>Chat with Lucy</Text>
                <Button
                    onPress={() => navigate('Chat')}
                    title="Chat with Lucy"
                />
            </View>

        );
    }
}

module.exports = ChatScreen;

可以看到 主要用了navigate 来跳转的

但是也得先注册

//导航注册
const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},//新添加的页面
});

如何隐藏导航条 使用自己的

http://blog.csdn.net/u011690583/article/details/70333972

这个说的不错

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!