這篇文章是居於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;