实现一个React-Native 小页面与跳转（入门）

继博主上一篇搭建React-Native环境搭配完成后，开始来构建我们的项目了。

首先搭建一个项目，博主第一关注的即项目的目录。（这一方面关于项目的目录以及搭建在网上的资料是真的很少啊）

先不多说，上图。

（上图是举个栗子，命名规范有待考究）

博主在根目录建了个src文件夹，文件里再分了components文件夹、navigation文件夹、pages文件夹以及static文件夹和Util文件夹。

分别说下用途：

• src： 顾名思义，就是我们写代码的主要地方啦。
• components：这里放置项目页面的各种封装的小组件供调用。
• navigation：这一块主要用于页面跳转处理（较为重要）
• pages: 这一块主要来放置相应的各种页面，例如博主的项目里目前有4个页面，分别是LoginScreen、LoginScreenOne、LoginScreenTwo还有PhoneLogin界面，至于index.js则是将所有页面汇集导出（这一块只是做个简化）。
• static：这个文件夹主要来放置一些相应的静态文件，如图片等。
• Util：这个文件夹主要用来放一些项目所需的处理工具。

大致目录即介绍完毕。

接下来走一遍项目运行流程：

首先看项目创建时产生的一个启动页： App.js

这个App.js即为我们一开始运行项目所看到的页面，在此处，博主将这个页面重新编写，关联到刚刚提到的 navigation 文件夹下的 index.js 文件。

而nagivation文件夹下的 index.js 到底是什么呢？

这一块就要相应的学习下关于 react-navigation 这个库的相应知识。（大致的理解就是这个库可以用来定义相应的路由，实现相应的页面跳转）使用前需引入。

import React, { Component } from 'react'
import {
    createAppContainer
} from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import TransitionConfiguration from '../Util/TransitionConfiguration'

import {
    LoginScreen,
    LoginScreenOne,
    LoginScreenTwo
} from '../pages/index'


const SketchRouter = createStackNavigator(
    {
        LoginScreen: {
            screen: LoginScreen,
            navigationOptions: ({ navigation }) => ({
                header: null
            }),
        },
        LoginScreenOne: {
            screen: LoginScreenOne,
            navigationOptions: ({ navigation }) => ({
                header: null
            }),
        },
        LoginScreenTwo: {
            screen: LoginScreenTwo,
            navigationOptions: ({ navigation }) => ({
                header: null
            }),
        },


    },

    {
        initialRouteName: 'LoginScreen', // 默认开始页
        headerBackTitleVisible: false,
        transitionConfig: (sceneProps) => ({
            screenInterpolator: TransitionConfiguration(sceneProps) //设置切换动画
        })
    }
)

export default createAppContainer(SketchRouter)

博主的小项目里大致现在的代码是这样。即从pages文件夹下的index.js文件导入所有我们写好的page项目页面，再将这些页面写入到 createStackNavigator 下（为什么名称含Stack? 因为可以相应的 pop() 弹出栈一样，实现界面回退效果，也可以像push一样跳转到新的页面。）而关于navigationOptions这个属性，则是定义页面的头部导航栏，这里我设置为null， 即无的意思。（此处由于博主自己封装了一个自己的导航栏，所以就没用默认的了）

那在这个页面里我们定义了默认启动页为LoginScreen页面，即项目启动即为pages文件夹下我们编写的页面，而至于那如何在当前页面跳转到其他页面呢？这一块则可以学习关于 react-navigation 的相应知识，通过相应的api实现跳转，例如：

更多具体的api如何使用，这一块可以自己再相应的百度搜索，总而言之，项目的结构目录，以及运行的流程大致就这么实现了。而对于我上一篇所展示的页面，自然也就可以在相应我们自己实现的页面展示出来了。

目前还在继续学习探索React-Native中，期待与你一起交流进步！o(*^＠^*)o