React Native初探--从安装运行首个app到填坑指南

好多人说rn好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

一、安装环境

(一)下载JDK 1.8(必须是1.8版本)

PATH:%JAVA_HOME%\bin
CLASSPATH:.;%JAVA_HOME%\lib\tools.jar (一定不要忘了前面的点) 

(二)Android Studio、SDK以及模拟器(如果是真机运行不需要安装模拟器)

  • Android Studio Android Studio的下载地址请看:https://developer.android.google.cn/studio/#downloads 安装方式:指定安装路径,一直点击下一步就可以了。
  • SDK和安卓模拟器: 打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可,这里也可以选择安装模拟器,找到对应的勾选进行下载即可。 需要在Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。(如果已经配置,就不用再去配置了。) 例如:
D:\android-sdk\tools;
D:\android-sdk\platform-tools;

(三)安装node

许多前端工具的安装都依赖于node的包管理器npm

  • 安装地址: Node官网: https://nodejs.org/ 如果官网打不开,可以看nodejs中文官网 https://nodejs.org/zh-cn/
  • 添加环境变量: 下载好之后,复制node的安装路径,在path中添加node环境变量。 示例如下:
E:\develop\nodejs\;
  • 查看node版本号: 安装完成后在cmd中输入 npm -v 回车,如下图:

查看node版本号

  • 查看npm版本号: 在cmd中输入 npm -v 回车,如下图:

查看npm版本号

※【说明】npm工具是nodejs里面自带的,所以只要配置了nodejs环境变量就OK了,不需要单独配置npm到环境变量。

(四)Python2.X(不支持Python3.X)

E:\develop\Python2.7.13\Scripts;
  • 查看python安装版本: 输入python命令即可。

查看python安装版本

(五)yarn

(1)安装方式有以下两种:

  • 1、yarn官网下载yarn安装包:
    • 官网地址: yarn官网 https://yarnpkg.com/zh-Hans/ 如果官网打不开,可以查看中文网: yarn中文网 https://yarn.bootcss.com/ 我这里选择的版本是1.7.0,你也可以选择其他版本,下载好了之后,双击安装,然后把yarn安装路径配置path环境变量中。
    • 添加环境变量, 示例如下:
    E:\develop\yarn1.7.0\bin\;
  • 2、使用npm工具下载yarn:
    • 安装命令: 使用命令npm install -g yarn就可以安装yarn了。
    • 安装路径:
    C:\Users\用户名\AppData\Roaming\npm\yarn

(2)相关命令:

  • 1、如果不知道路径,可以使用where yarn命令查看电脑yarn的安装路径,可以看到我的安装路如下:
  C:\Users\\Administrator\AppData\Roaming\npm\yarn
  C:\Users\\Administrator\AppData\Roaming\npm\yarn.cmd
  E:\develop\yarn1.7.0\bin\yarn
  E:\develop\yarn1.7.0\bin\yarn.cmd
  E:\develop\yarn1.7.0\bin\yarn.js
  • 2、查看yarn版本号:

执行npm view yarn version 查看yarn版本号,当前的版本号为1.7.0 执行 yarn -v 查看安装的yarn版本号,我当前的版本为1.7.0 执行yarn --version 查看安装的yarn版本号,我当前的版本为1.7.0

  • 3、升级yarn版本号:
    • 通过msi安装的,可以卸载旧版本的yarn,然后官网下载新版的yarn,然后安装。 【注意】通过msi安装的yarn并不会覆盖通过npm安装的yarn,两者同时存在。卸载的话,也是分开卸载的。
    • 通过npm命令安装的,可以有以下几种方式选择:
      命令行直接安装升级:
      npm install yarn -g

      加上版本号安装:
      npm install yarn@1.7.0 -g

      加latest安装:
      npm install yarn@latest -g

(六)react native

react native中文网 https://reactnative.cn/

  • 使用npm命令行安装react native,如下:
    npm install -g react-native-cli
  • 查看本地react-native-cli版本号,使用命令:
    react-native --version

图示如下,我当前的react-native-cli版本号为2.0.1:

查看本地react native版本号

  • 查看react native所有版本信息,使用命令:
    npm info react-native

图示如下:

查看react native所有版本信息

  • 升级react native版本,使用命令:
    npm install --save react-native@0.56.0
    其中0.56.0是版本号,可以去官网查一下你要下载的版本号是哪一个,就填写哪一个。

(七)说明

1.安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

例如:

以前是npm命令:npm install --save react-native@0.56.0 你可以使用yarn命令替代:yarn add react-native@0.56.0

2.加快react native启动的几种方式:

  • 1、使用以下命令:
    npm config set registry=http://registry.npm.taobao.org/

加快react native启动的命令图示

  • 2、使用全局设置的命令:
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

使用全局设置的命令

  • 3、找到node.js的安装目录,进入nodejs\node_modules\npm找到文件npmrc,打开后在该文件末尾加上 registry = https://registry.npm.taobao.org 然后保存退出即可。
  • 4、给yarn设置镜像(如果不用yarn命令,可以不设置这一项):
    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

给yarn设置镜像

二、运行首个App

(一)使用命令行创建新项目

使用react-native init 项目名称创建项目,如图所示:

创建项目

(二)手动打开安卓模拟器

可以使用脚本打开,

(二)编译并运行 React Native 应用

在刚创建的rn项目根目录,打开命令行,输入react-native run-android命令,如图所示:

运行成功如下图所示:

三、出现的问题

【建议】

(一)问题1 The development server returned response error code: 500

解决方式: 在刚创建的项目的根目录运行下列代码: 首先执行yarn remove babel-preset-react-native,然后再执行yarn add babel-preset-react-native@2.1.0

(二)问题2 关于命令行提示gradle的一次错

建议:把项目里面的android目录导入到Android Studio,让Android Studio工具帮你自动构建。

(三)问题3 RN默认是用的gradle3.5构建的,所以建议使用AS2.3.X版本(但是不能大于3.0.0版本)导入项目。我用的是AS3.1.3,gradle构建成功的,但是命令行执行react-native run-android命令一直报各种错,问了别人也找不到解决方案,可能是RN对高版本的AS工具以及高版本的gradle不兼容吧。

(四)如果模拟器上运行项目出现"Unable to load script from assets 'index.android.bundle'.Make sure your bundle is packaged correctly or you are running a package server."这样的错误怎么解决?

解决方式: 1.进入\android\app\src\main目录,新建assets文件夹。 2.进入项目根目录cmd运行以下命令:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

(五)如果第四步的问题还没有解决,建议使用以下方式创建和安装应用:(这个又是一种构建方式,和rn有点区别,可以玩一下,但不建议学这个。)

npm install -g create-react-native-app   这是安装`create-react-native-app`命令工具
create-react-native-app 项目名   例如:create-react-native-app demo1
进入项目根目录,输入`npm start`命令运行(也可以试试yarn start)

(六)Unable to resolve module 'AccessibilityInfo'

react native版本问题,建议下载react-native 0.55.4版本,以及react-native-cli 1.2.0 版本,具体操作如下: 打开cmd命令行,逐个输入以下命令:

npm uninstall -g react-native-cli
npm install react-native@0.55.4
npm install -g react-native-cli@1.2.0

然后打开一个项目目录,打开cmd命令行输入以下命令创建工程:

react-native init --version="0.55.4" 项目名

(七)Invariant Violation:Applicaction 你的项目名称 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.

错误如图所示:

这个问题一般是配置的问题,解决方式如下,确保registerComponent(参数1)getMainComponentName()返回值这两个保持一致就OK:

根路径里面的index.js文件打开,请看AppRegistry.registerComponent('rn_demo', () => App); 我这里括号内参数1为rn_demo,和项目根路径名称是一致的。

打开目录/android/app/src/main/java/com/项目名/MainActivity.java,找到getMainComponentName()方法,我这里返回的是rn_demo1,事实上我项目根路径名字叫做rn_demo。我只需要改成rn_demo就好了。

    @Override
    protected String getMainComponentName() {
        return "rn_demo1";
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏网站漏洞修补

网站漏洞修补网站文件任意查看漏洞详情与利用

在对网站程序代码的安全检测当中,网站文件任意查看漏洞在整个网站安全报告中属于比较高危的网站漏洞,一般网站里都会含有这种漏洞,尤其平台,商城,交互类的网站较多一些...

15660
来自专栏章鱼的慢慢技术路

Linux中的环境变量PATH

26120
来自专栏linux系统运维

exportfs命令,NFS客户端问题,FTP介绍,使用vsftpd搭建ftp

25380
来自专栏技术博文

LNMP源码编译安装(centos7+nginx1.9+mysql5.6+php7)

1.准备工作: 1)把所有的软件安装在/Data/apps/,源码包放在/Data/tgz/,数据放在/Data/data,日志文件放在/Data/logs,项...

46460
来自专栏IMWeb前端团队

Node服务一键离线部署

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 背景说明 项目测试通过,到了上线部署阶段。部署的机器安全限制比较严格,不允...

40670
来自专栏程序小工

【Linux】系统学习Crontab定时任务

crontab 是一个用于设置周期性执行任务的工具。目前服务器端的运行环境大多数为 Linux,在日常的运营和维护中会有很多需要定期执行的操作,其中有些操作是可...

22520
来自专栏linux系统运维

exportfs命令,NFS客户端问题,FTP介绍,使用vsftpd搭建ftp

/tmp/ 192.168.209.129/24(rw,sync,no_root_squash)

37630
来自专栏应用案例

Linux常用软件安装总结

首先说xshell一个好用的功能,如果你同时要管理几台一样的服务器组成的集群,一台一台操作很麻烦,可以使用xshell菜单栏——工具——勾选发送键输入到所有会话...

38480
来自专栏云计算教程系列

如何在Ubuntu 14.04上将ngx_pagespeed添加到Nginx

ngx_pagespeed,或者只是pagespeed,是一个Nginx模块,旨在通过减少资源的大小以及客户端浏览器加载它所需的时间来自动优化您的网站。如果您还...

13330
来自专栏linux驱动个人学习

用户态/内核态、用户栈/内核栈

内核态就是拥有资源多的状态,或者说访问资源多的状态,也称为特权态。相对来说,用户态就是非特权态,访问的而资源将受到限制。如果一个程序运行在特权态,该程序就可以访...

20220

扫码关注云+社区

领取腾讯云代金券