这篇文章是居于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
