这篇文章是居于React-Native初体验一写的，看这篇文章之前请看liujun2son的博客：React-Native初体验一

1.reactNativeTest项目结构

用webstorm软件打开reactNativeTest项目，项目结构图如下：

2.index.android.js文件的说明

    /**这里是导包，导入我们要使用的控件*/
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';

    /**
     * 定义一个组件
     */
    class reactNativeTest extends Component {

      //开始渲染界面
      render() {
        return (
            /*View 容器*/
          <View style={styles.container}>
            /*文本标签*/
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            /*styles.instructions 样式的应用*/
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
              Double tap R on your keyboard to reload,{'\n'}
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
      }
    }

    /**
     * 定义样式
     */
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    // 注册应用(registerComponent)后才能正确渲染
    // 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
    AppRegistry.registerComponent('reactNativeTest', () => reactNativeTest);

3.运行加载index.android.js文件的界面效果

4.修改index.android.js文件（修改首页界面效果）

    /**这里是导包，导入我们要使用的控件*/
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    /**导入一个自己写的js文件*/
    import Splash from './app/Splash.js';

    // 注册应用(registerComponent)后才能正确渲染，并将第一个加载界面指向Splash.js
    AppRegistry.registerComponent('reactNativeTest', () => Splash);

5.添加Splash.js文件

    /*导包*/
    import React from 'react';
    import {
      Dimensions,
      Image,
      InteractionManager,
      View,
      Text,
    } from 'react-native';
    /*获取手机屏幕的宽和高*/
    var {height, width} = Dimensions.get('window');

    /*定义一个组件*/
    class Splash extends React.Component {

      /*构造器*/
      constructor(props) {
        super(props);
      }

      /*开始渲染*/
      render() {
        return (
          <View style={{flex:1}}>
              /*在View容器中方一张图片*/
              <Image
                style={{flex:1,width:width,height:height}}
                /*图片的路劲*/
                source={require('./image/ic_welcome.png')}
                />
          </View>
        );
      }
    }
    /*声明该class可以被其它js文件导入使用*/
    export default Splash;

添加Splash.js项目效果图如下：

6.从新加载首页

1.在模拟器上按ctrl+m弹出下图，点击reload:

2.重新加载后的界面效果：

3.完整项目图与代码：github上下载reactNativeTest项目：