1.新建XieCheng項目
在window的控制臺執行下面命令（ 前提是已經搭建好reactnative的開發環境 ）：
react-native init XieCheng // XieCheng 是項目名稱
2.打開新的項目
這里使用webStrom打開項目
3.運行項目
1.先在電腦上啟動模擬器
下面使用5.0的模擬器
2.檢查adb是否連接上模擬器
在使用adb前要配好android的開發環境變量
3.開始包服務
在控制臺進入到項目的根目錄執行：
react-native start
4.運行XieCheng項目
react-native run-android
執行后的效果：
4.搭建項目的框架
1.搭建項目結構
每一個模塊對應一個目錄，分別存放各自組件
新建一個MainPage組件作為應用的主頁頁面
2.設計主頁面
MainPage作為主頁面,修改index.android.js 和 index.ios.js文件
執行效果：
5.搭建底部的導航欄
1.導入TabNavigator庫
TabNavigator Github地址
在控制臺進入到項目的根目錄下執行下面命令：
npm install react-native-tab-navigator --save
如果報錯請執行多次
3.在MainPage中引入該組件
4.底部導航條添加Item
1.引入圖片資源存放在image目錄
2.添加TabNavigator.Item，導航欄對應的每一個Item
設置選中renderSelectedIcon以及默認renderIconItem對應的樣式以及對應圖片
執行的效果：
5.默認選中首頁
初始化state（狀態機）中的 selected的值為‘首頁’，通過TabNavigator.Item中的屬性selected 進行判斷，是否選中當前item。
6.底部的Item之間的切換
編寫其它TabNavigator其它Item，同上。
完整MainPage.js的代碼
/**
* Created by Administrator on 2017/8/8 0008.
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
//引入TabNavigator庫
import TabNavigator from 'react-native-tab-navigator';
/**
* 1.定義一個MainPage組件，并導出
*/
export default class MainPage extends Component {
/**
* 狀態機
* @type {{}}
*/
state={
selected:'首頁'
}
/**
* 2.渲染組件的頁面
* @returns {XML}
*/
render(){
return (
<TabNavigator
tabBarStyle={{backgroundColor:'#e1e1e1',height:50}}
>
{/*首頁*/}
<TabNavigator.Item
renderIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/home_icon_nornol.png')}></Image>}
title="首頁"
selected={this.state.selected=='首頁'}
renderSelectedIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/home_icon_press.png')}></Image>}
onPress={ ()=> this.setState({
selected:'首頁'
}) }
>
<Text>home</Text>
</TabNavigator.Item>
{/*行程*/}
<TabNavigator.Item
renderIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/plan_icon_nornol.png')}></Image>}
title="行程"
selected={this.state.selected=='行程'}
renderSelectedIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/plan_icon_press.png')}></Image>}
onPress={ ()=> this.setState({
selected:'行程'
}) }
>
<Text>plan</Text>
</TabNavigator.Item>
{/*客服*/}
<TabNavigator.Item
renderIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/customer_icon_nornol.png')}></Image>}
title="客服"
selected={this.state.selected=='客服'}
renderSelectedIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/customer_icon_press.png')}></Image>}
onPress={ ()=> this.setState({
selected:'客服'
}) }
>
<Text>customer</Text>
</TabNavigator.Item>
{/*我的*/}
<TabNavigator.Item
renderIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/mine_icon_nornol.png')}></Image>}
title="我的"
selected={this.state.selected=='我的'}
renderSelectedIcon={ ()=> <Image style={styles.imageStyle}
source={require('../../image/mine_icon_press.png')}></Image>}
onPress={ ()=> this.setState({
selected:'我的'
}) }
>
<Text>mine</Text>
</TabNavigator.Item>
</TabNavigator>
)
}
}
/**
* 3.頁面的樣式
*/
const styles=StyleSheet.create({
imageStyle:{
width:24,
height:24,
marginTop:2,
}
})
執行效果：
6.搭建首頁的頂部導航欄
1.新建首頁HomePage組件
點擊首頁Item時對應的頁面。
2.引用首頁HomePage組件
回到MainPage組件，在首頁這個TabNavigator.Item中,用上面編寫HomePage組件替代Text
執行效果：
3.新建一個HomeTopBar組件
編寫首頁頁面頂部搜索框組件
4.引用HomeTopBar組件
在HomePage組件中引入HomeTopBar組件（頂部搜索框）
5.完善HomeTopBar布局
1.通過權重布局
組件擺放位置
對應的樣式：使用flexDirection規定組件擺放方向，使用flex屬性定義每個組件的權重。
2.左邊布局
擺放Image組件，引入對應圖片
3.右邊布局
也是擺放Image組件，引入對應圖片
4.中間布局
使用輸入框TextInput組件和Image組件
1.修改背景：設置背景顏色，圓角矩形以及寬和高
2.添加輸入框TextInput
對應的樣式：設置間距，設置左間距30是等下為了擺放圖片
3.添加搜索圖標（Image）
對應的樣式：通過設置絕對定位（absolute）的方式，定位圖片擺放位置
小碼哥HTML5培訓——持續更新中.............
