繼博主上一篇搭建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
