这篇文章是居于React-Native初体验一写的，看这篇文章之前请看本人的前一篇：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;