Back

reactnative - 1. 搭建环境 与 hello world

发布时间: 2018-12-20 03:17:00

最近， 我开始参与我们的手机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 生成的临时文件

Back