小码哥-React-Native初体验三（window下搭建应用的首页）

如果还没有看过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={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text>
</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}>

<View style={styles.page}>
<Text>Page 1</Text>
</View>

<View style={styles.page}>
<Text>Page 2</Text>
</View>

<View style={styles.page}>
<Text>Page 3</Text>
</View>

</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