如果還沒有看過React-Native初體驗二請先看React-Native初體驗二在回來看。

ReactNativeTest項目的下載地址:github
1.reactNativeTest項目運行的效果

2.實現啓動頁
導航器的實現
1.定一個Welcome.js文件
2.在Welcome.js中使用Navigator導航器
3.給Navigator導航器初始化
Welcome.js文件代碼：

class Welcome extends React.Component {
    /**
     * 構造器初始化
     * @param props
     */
    constructor(props) {
        super(props);
        //函數的定義並初始化
        this.renderScene = this.renderScene.bind(this);
        this.goBack = this.goBack.bind(this);
        //監聽返回事件
        BackAndroid.addEventListener('hardwareBackPress', this.goBack);
    }
    /**
     * 監聽手機點擊返回按鈕
     */
    goBack() {
        return NaviGoBack(_navigator);
    }
    /**
     * 渲染場景的函數：這裏接收系統傳來的兩個參數，一個是路由對象，一個是導航器對象
     */
    renderScene(route, navigator) {
        let Component = route.component;//獲取到initialRoute路由中設計的Splash組件
        _navigator = navigator;//導航器對象，在goBack（）函數中需要用到
        return (
            <Component navigator={navigator}  route={route} />//返回一個渲染界面的Splash組件，並傳遞兩個參數
        );
    }
    /**
     * 界面跳轉的動畫：這裏接收系統傳來的兩個參數，一個是路由對象，一個是導航器對象
     */
    configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromRight;
    }
    /**
     * initialRouter: 路由初始化配置信息，就是說頁面加載時，第一次需要展現什麼內容
     *configureScene: 場景轉換動畫配置。在RN看來，從一個頁面切換到另外一個頁面，就是從一個場景切換到另外一個場景，這裏配置的是場景動畫信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出
     *renderScene: 渲染場景，讀取initialRouter傳來的數據，確定顯示那些內容。
     * */
    render() {
        return (
            <Navigator
                ref='navigator'
                style={styles.navigator}
                configureScene={this.configureScene}
                renderScene={this.renderScene}
                initialRoute={{
                component: Splash,
                name: 'Splash'
          }}
            />
        );
    }
}
/**
 * 彈性（Flex）寬高:
 *
 * 使用flex:1來指定某個組件擴張以撐滿所有剩餘的空間
 *如果有多個並列的子組件使用了flex:1，則這些子組件會平分父容器中剩餘的空間。
 * 如果這些並列的子組件的flex值不一樣，則誰的值更大，誰佔據剩餘空間的比例就更大
 *
 * 注意：
 * 組件能夠撐滿剩餘空間的前提是其父容器的尺寸不爲零。
 * */
let styles = StyleSheet.create({
    navigator: {
        flex: 1
    }
});
export default Welcome;

定時器的實現

1.定一個Splash.js文件

2.在構造器中獲取導航器Navigator對象

3.設計定時，實現界面跳轉

Splash.js文件代碼：

/**導包*/
import React from 'react';
import {
    StyleSheet,
    Navigator,
    StatusBar,
    BackAndroid,
    View,
    Text,
    Platform
} from 'react-native';
/**導包*/
import Splash from '../Splash';
/**導一個工具類*/
import { NaviGoBack } from '../utils/CommonUtils';
var _navigator;
import React from 'react';
import {
  Dimensions,
  Image,
  InteractionManager,
  View,
  Text,
} from 'react-native';
import AppMain from './page/AppMain.js';
/**獲取手機屏幕的寬和高*/
var {height, width} = Dimensions.get('window');
class Splash extends React.Component {
  /***
   * 構造器
   * 開始了一個定時器setTimeout（），2500豪秒後跳轉到AppMain.js
   * @param props
   */
  constructor(props) {
    super(props);
    //獲取navigator對象，在welcome.js傳過來的
    const {navigator} = props;//可以
    //const {navigator} =this. props;//可以
    //const {navigator} = this.props.navigator;//這個是不可以的，會報錯
    //const {navigator} = props.navigator;//這個是不可以的，會報錯
    this.timer = setTimeout(() => {
        InteractionManager.runAfterInteractions(() => {
          navigator.resetTo({
            component: AppMain,
            name: 'AppMain'
          });
        });
      }, 2500);
  }
  /**
   * 渲染界面，只有一張圖片
   * @returns {XML}
     */
  render() {
    return (
      <View style={{flex:1}}>
        <Image
          style={{flex:1,width:width,height:height}}
          source={require('./image/ic_welcome.png')}
          />
      </View>
    );
  }
}
export default Splash;

3.修改index.android.js文件

/**這裏是導包，導入我們要使用的控件*/
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
/**導入一個自己寫的js文件*/
import Welcome from './app/page/Welcome.js';
// 註冊應用(registerComponent)後才能正確渲染
// 注意：只把應用作爲一個整體註冊一次，而不是每個組件/模塊都註冊
AppRegistry.registerComponent('reactNativeTest', () => Welcome);

4.運行

1.來到項目根目錄，打開cmd

2.執行：

react-native start
``
3.來到項目根目錄，打開新的cmd

4.執行：

react-native run-android

5.效果：
![](http://upload-images.jianshu.io/upload_images/3086262-0fb0dcf4789c17b6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3.實現首頁

1.定一個AppMain.js文件

2.監聽點擊返回按鈕

BackAndroid.addEventListener('hardwareBackPress', xxxxx);

3.實現頂部導航欄

<View style={styles.headerMenu}>
<View style={{flex:1,justifyContent:'center'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
<View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}>
<Image source={require('../image/hotel_ic_home.png')} style={{width:20,height:26,marginLeft:8}}/>
</View>

</TouchableOpacity>

</View>

<View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}>
<Image source={require('../image/ic_action_search.png')} style={{width:24,height:24,marginRight:8,alignItems:'center'}}/>
</TouchableOpacity>
</View>

</View>

4.實現:ViewPagerAndroid

<ViewPagerAndroid

ref={viewPager => { this.viewPager = viewPager; }}

style={styles.flex1}

initialPage={0}

pageMargin={0}>

</ViewPagerAndroid>

5.實現底部導航欄:

<View style={styles.footerMenu}>
<TouchableOpacity onPress={() => this.onClick(1)}>
<Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >首頁 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(2)}>
<Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >商城 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(3)} >
<Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
<Text style={styles.welcome} >個人中心 </Text>
</TouchableOpacity>
</View>

6.實現點擊事件：TouchableOpacity

<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
.....
</TouchableOpacity>

AppMain.js文件代碼：

                <Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
                <Text style={styles.welcome} >首頁 </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.onClick(2)}>
                <Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
                <Text style={styles.welcome} >商城 </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.onClick(3)} >
                <Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
                <Text style={styles.welcome} >個人中心 </Text>
            </TouchableOpacity>
        </View>
     </View>
    );
}

}
/**

屬性介紹：
*
flexDirection:
*
style中指定flexDirection可以決定佈局的主軸。子元素是應該沿着水平軸(row)方向排列，還是沿着豎直軸(column)方向排列呢？默認值是豎直軸(column)方向
*
justifyContent:
style中指定justifyContent可以決定其子元素沿着主軸的排列方式。子元素是應該靠近主軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end、space-around以及space-between
*
alignItems:
*
在組件的style中指定alignItems可以決定其子元素沿着次軸（與主軸垂直的軸，比如若主軸方向爲row，則次軸方向爲column）的排列方式。子元素是應該靠近次軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end以及stretch。
*
backgroundColor 背景顏色
*

borderColor 邊界顏色
*/
var styles = {
flex1: {

 flex: 1,

},
page: {

 alignItems: 'center',
 flexDirection: 'row',
 flex: 1,
 justifyContent: 'center',
 //borderWidth: 1,
 borderColor: 'black',

},
headerMenu: {

 flexDirection: 'row',
 backgroundColor: '#F2F2F2',
 height: 50,
 paddingHorizontal: 10,

},
footerMenu: {

 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 backgroundColor: '#F2F2F2',
 height: 60,
 paddingHorizontal: 40,

},
img: {

 alignItems: 'center',
 justifyContent: 'center',
 width:90,
 height:90

},
welcome: {

 fontSize: 10,
 textAlign: 'center',

},
line: {

 backgroundColor: '#cdcdcd',
 height: 1,

},
}
export default AppMain;
```
6.運行

1.來到項目根目錄，打開cmd

2.執行：

react-native start

3.來到項目根目錄，打開新的cmd

4.執行：

react-native run-android

5.效果：

7.最後附上整個reactNativeTest項目的結構圖

來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2244

qq_36778200

發佈了0 篇原創文章 · 獲贊 0 · 訪問量 1萬+

私信關注

小碼哥-React-Native初體驗三（window下搭建應用的首頁）

如果還沒有看過React-Native初體驗二請先看React-Native初體驗二在回來看。

小碼哥-玩轉【鬥魚直播APP】系列之項目部署

小碼哥-React-Native初體驗一（window環境下開發）

小碼哥-React-Native初體驗二（window環境下實現啓動頁）

小碼哥-React-Native初體驗四（window下實現登錄界面）

小碼哥-玩轉【鬥魚直播APP】系列之框架搭建

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結