reactnative - 1. 搭建环境与 hello world

2018-12-20 11:17

访问量: 1489

最近，我开始参与我们的手机APP了。

项目是用react native 写的。所以记录一下。

入门很容易，有现成的中文文档： https://reactnative.cn/docs/getting-started.html

搭建环境

目前是需要下载JDK 1.8 由于是android环境，我选择自己的i5 16g 的台式机。用起来爽歪歪。

node: 必须大于 8.3 ，我使用了10.9。

python: 2.x ，不能 3 以上。所以我使用了 2.7 (下载：https://www.python.org/downloads/release/python-2715/)

之后执行命令

# 安装npm源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

# 安装 react native 命令行工具
npm install -g yarn react-native-cli

# 设置yarn的源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

然后创建一个新项目： hello

react-native init hello

# 然后会看到一堆生成项目文件的消息。  很有意思。

为gradle设置代理服务器：（如果你在国外可以跳过这一步。否则在国内会遇到错误）

$ cat ~/.gradle/gradle.properties
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=1080
systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=1080

然后执行命令：

$ react-native run-android

就可以看到项目跑起来了。

项目的文件夹基本结构

/e/workspace/hello/
▸ android/
▸ ios/
▸ node_modules/
▸ screens/
  App.js
  app.json
  index.js
  package-lock.json
  package.json
  yarn.lock

几个需要注意的基本结构：

package.json: 整个项目的配置文件，定义了用到的第三方包等。类似于Gemfile

android: 生成的文件夹。一般情况用不到。不要轻易修改。

ios: 生成的文件夹，一般情况用不到。

node_modules：不要放到git 代码中，生成的文件夹

index.js 入口文件

App.js 代码文件。该文件被index.js调用。可以认为是我们写入第一行react native代码的文件。

yarn.lock 使用yarn生成的临时文件

package-lock.json 使用npm 生成的临时文件

项目的文件夹基本结构

订阅/RSS Feed