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()