HelloWorld工程

在本机配置好开发环境之后，便可以创建工程。

首先我们先创建一个HelloWorld工程，打开命令行：

$ cd 指定目录
$ create-react-native-app hello-world

等待一段时间，当命令行出现如下信息，便表示该工程创建成功。

1，文件结构

创建好的工程根目录下，有如下文件。

其中点开通的文件为隐藏文件，如看不到，可以调整文件夹显示属性，使隐藏文件和文件夹显示即可。隐藏文件的功能在此不做介绍，后续高级章节中进行展开讲解。

• App.js 应用开发入口
• app.json 应用配置文件
• App.test.js 应用测试用例
• node_modules 依赖包文件夹
• package.json node配置文件
• README.md 说明文件
• yarn.lock yarn配置文件

以上文件中，出第一个App.js文件外，其他文件我们暂时不会使用，大家不要更改其他文件中的内容。其他文件的功能，在后续高级章节中陆续展开讲解。

2，App.js

App.js是程序开发的入口，我们首先阅读下其源码：

为了讲解方便，我将代码分为三个区域：

//区域1
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//区域2
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

//区域3
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

区域1

模块引入区，通过ES6的Module引入外部模块。

通常我们使用两个默认的外部模块react和react-native构建我们的初始工程。

大家注意，这里我们引入模块是并没有给出模块的相对路径，而是直接使用模块名称进行引入。

是因为在ReactNative项目中，react和react-native是依赖框架，通过npm或者yarn进行安装使用，这样的依赖框架包，我们安装之后可以直接使用模块名称进行引入，不需要在标注相对路径。

但自己书写的js模块，仍需要使用相对路径进行引入，后续我们会涉及到此内容。

区域2

React组件定义区，ReactNative采用的是React.js组件化编程思想，每一个模块中包含一个React组件，关于React.js的知识我们在下一个章节讲述。

该区域是编程的核心区域，在此区域中，我们通过代码编写逻辑，控制页面元素，响应用户交互信息和刷下页面。

区域3

样式表定义区。

在ReactNative开发中，页面元素的样式通过inline的样式表进行调整，与传统网页CSS控制样式不同，ReactNative样式是通过元素的style属性进行控制，所有样式对象都只对其style赋值的元素起作用，没有全局样式的概念。

ReactNative不支持CSS样式属性，但其样式控制属性与CSS类似，最大的不同是采用驼峰命名法，例如CSS中的background-color，在ReactNative中的属性为backgroundColor。

具体的样式，我们在后续章节会详细讲解。