react-native实现页面跳转createStackNavigator(入门篇)

此篇教程会持续更新。。。

官方文档createStackNavigator

react-native实现页面跳转createStackNavigator(入门篇)_第1张图片
调试环境

为了能够让阅读者容易上手,我先将简单的代码附上,阅读者拷贝到自己的代码看看效果,然后再看我的教程一点点深入了解createStackNavigator,达到灵活运用。

演示步骤

1)首先使用终端切换到项目所在目录下,输入:npm install --save react-navigation,等待安装成功,一般学习到这里自己的电脑上肯定已经安装好了npm,这个在安装node的时候会默认安装;

2)下面这个是配置路由的页面,你将这个页面放在单独的组件中,这个组件不能含有其他组件,我取名叫Main.js:

import {createStackNavigator} from 'react-navigation';

import Test01 from './Test01';

import Test02 from './Test02';

const App = createStackNavigator({

    Test01:{

        screen:Test01,

        navigationOptions:({navigation})=>({

            title:'这是Test01的标题'

        })

    },

    Test02:{

        screen:Test02,

        navigationOptions:({navigation})=>({

            title:'这是Test02的标题'

        })

    }

},{

    initialRouteName:'Test01'

});

module.exports = App;

记住导入的那两个文件必须与这个文件在同一目录,如果不在需要自己修改上面的路径(假如,你还不知道怎么导入的话,一般学到这里都了解了,你就按照我的要求放在同一个文件夹中,同时希望你能去看相关的教程来提高自己);

3)新建文件名称为:Test01.js:

import React,{Component} from 'react';

import {Button} from 'react-native';

export default class Test01 extends Component{

    render(){

        return (

           

你可能感兴趣的:(react-native实现页面跳转createStackNavigator(入门篇))