React Native 学习笔记（二）

React Native 项目结构解析

打开创建的React Native工程中index.ios.js

这些代码分基本由四部分构成

第一部分

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

这一部分是导入React Native包，导入React Native组件（和iOS，安卓开发中的导入头文件，框架类似）

AppRegistry：JavaScript 运行所有React Native应用的入口

StyleSheet：React Native中使用的样式表（类似CSS 样式表）

Text、View：使用到的组件

第二部分

export default class HelloRN extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!

</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

这一部分是创建React Native组件，界面的元素创建都在这一部分

第三部分

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,
},
});

这一部分创建样式实例，用于对界面元素的样式设置，包括位置，颜色，大小，边框等。

第四部分

AppRegistry.registerComponent('HelloRN', () => HelloRN);

这一部分是注册入口组件，告知ReactNative哪一个组件被注册为应用的根容器，(应用启动出现的第一个界面) 类似iOS中的

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
return  YES;
}

安卓中的

Application.onCreate()