ReactNative环境配置及项目结构介绍

ReactNative环境配置及项目结构介绍

ReactNative 简介

ReactNative 于2015年被 Facebook 开源。
基于 JavaScript ，动态加载并编译Virtual-DOM，可同时运行于Android、iOS、Browser各个平台。
在Android上依赖于webkit.org官方开源的jsc.so。

ReactNative 环境配置

下面只介绍 macOS 开发平台下的 Android 环境配置 [参考ReactNative环境搭建]

* 安装 HomeBrew, Mac 系统的包管理器
	/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

* 安装 Node.js, JavaScript 的运行环境
	brew install node
	
* 设置 npm 镜像以加速, npm 是 Node.js 的模块依赖管理工具
	npm config set registry https://registry.npm.taobao.org --global
	npm config set disturl https://npm.taobao.org/dist --global
	
* 安装 react-native-cli, ReactNative 的命令行工具
	npm install -g react-native-cli
	
* 安装 watchman, 监视文件系统变更的工具
	brew install watchman

创建新项目

react-native init HelloRN

目录结构

在 HelloRN 工程目录下：

• android/: Android 原生代码目录，主要用于原生库、原生View的编写桥接、以及 ReactNative 第三方库的 link。
• ios/: iOS 原生代码目录，主要用于原生库、原生View的编写桥接、以及 ReactNative 第三方库的 link。
• index.js: 设备运行项目的入口文件。
• package.json: npm 的包管理文件，功能类似 Android 的 gradle，iOS 的 cocoaPods。
• node_modules/: 执行 npm install 之后生成，包含 npm 根据 package.json 下载的第三方包的源代码。
• （如果搭建了 typescript 开发环境：）
  • tsconfig.json: typescript 环境配置文件。
  • src/: typescript 搭建环境时新建目录，用于存放之后编写的 ts 代码。
  • lib/: 执行 tsc 脚本后，根据已有 ts 代码，编译成的 js 代码目录，也是代码运行时的目录，即运行时代码都指向 lib 文件夹。

运行新项目

npm install
react-native run-android

ReactNative 资源推荐：

• ReactNative 源码
• ReactNative 中文网
• ReactNative 中文社区