這篇文章是居于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;
添加Splash.js項目效果圖如下：
Paste_Image.png
6.從新加載首頁
1.在模擬器上按ctrl+m彈出下圖，點擊reload:
Paste_Image.png
2.重新加載后的界面效果：
3.完整項目圖與代碼：github上下載reactNativeTest項目：
來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2216&highlight=React
