Windows下配置React-native环境问题总结

标签: React Native  Windows
22人阅读 评论(0) 收藏 举报

从最近移动端市场的需求来看,Android原生开发已经危机重重,混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰,因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇,后面会有系列文章记录学习Reactive Native的成长,希望能帮助到后来的人,尤其是Android原生开发转混合开发的人。

使用的电脑操作系统不同,环境配置具体步骤有所不同,此篇文章是针对Windows下使用Android Studio开发RN环境的搭建。

一: 环境搭建

1.安装Chocolatey

Chocolatey是一个Windows上的包管理器,安装Chocolatey是为了方便接下来安装Python和Node.js。当然也可以跳过这步直接去官网下载Python和Node.js。

以管理员的身份来运行命令提示符窗口运行,打开翻墙软件执行这个命令要快些。

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

下载安装完成后,使用chocolatey命令查看是否安装成功,出现版本号证明安装成功,r就可以使用命令安装工具了。

2.安装Python

使用Chocolatey来安装Python 2,打开命令提示符窗口cd到你要安装的盘运行

choco install python2

(tips:目前版本不支持Python3)

使用python命令查看是否安装成功

3.安装Node.js

choco install nodejs.install

使用node -v命令查看是否安装成功

设置npm镜像加速后面的过程(翻墙)

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

4.安装Yarn和React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

使用yarn命令查看是否安装成功

设置yarn镜像源:

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

5.测试安装

以上步骤就完成了RN的环境配置,初始化一个项目来测试安装是否完成,在命令提示符窗口cd到项目要创建到的目录。

react-native init ReactNativeDemo  ---初始化项目

cd ReactNativeDemo                       ---切换到项目根目录

react-native run-android                 ---运行项目

如果你已经成功运行了项目,说明安装成功。

二   前边初始化了一个Rn项目,然后就可以在手机上边运行了,运行的步骤:

1.进入项目的根目录,右击打开命令行,输入react-native run-android,等待项目编译运行

等待片刻,项目如果运行成功会出现如下界面

2.1 此时RN的APP已经安装完毕,但有以下需要注意:
2.1.1 此时app和node.js服务端的交互是通过数据线传递的数据,如果拔掉数据线,摇晃手机打开RN开发者菜单,点击reload,可能会出现红屏,提示:could not connect to development server.

2.1.2 解决方法为:首先保证手机和电脑处于同一wifi下,然后摇出RN开发者工具菜单依次打开Dev Setting–>Debugging–>然后输入电脑在该网段分配的IP地址,并设置端口号为8081(node.js服务的默认端口号)格式如下:192.168.3.3:8081,然后重新reload此时即可重新请求到数据

上边步骤操作完成,就可以在app.js(这里需要注意在0.49版本之前app.js是拆分为index.android.js和index.ios.js的,android和ios开发可以分别在对应的文件里边写代码)里边写Rn代码了

运行项目中可能遇到的问题:

  总结:初始化运行红屏错误 unable to load script from asset/index.android.bundle
  原因:assets中没有成功打包出index.android.bundle文件
解决:1.去(你的项目文件夹)\android\app\src\main目录下新建assets文件夹
     2.终端下运行
     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
3.再次执行 react-native run-android(运行之前一定要去刚刚新建的assets文件夹下查看生成了index.android.bundle文件)
  注:由于0.49版本以后的react-native没有index.android.js和index.ios.js文件,而统一合并成了index.js,所以使用0.49及以后版本的开发者请将第2步中的入口文件改为index.js
问题二:

查看评论

用GDB调试程序(五)

 查看运行时数据———————        在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据。print命令的格式是:  ...
  • haoel
  • haoel
  • 2003-07-09 08:30:00
  • 54428

React Native-创建项目和运行项目

安装完react以后,在终端输入以下:react-native init myFirstReactProject安装完成如下图: 蓝色框框里面就写清楚怎么运行,这个项目。 下面举个运行ios版...
  • zhaolaoda2012
  • zhaolaoda2012
  • 2016-09-06 14:07:13
  • 10482

React native搭建开发环境

Chocolatey 安装Chocolatey,输入cmd,进入控制台,输入 @"%SystemRoot%\System32\WindowsPowerShell\v1.0\power...
  • weixin_41759092
  • weixin_41759092
  • 2018-04-17 16:14:31
  • 6

React-Native App启动页制作(安卓端)

原文链接:Bougie的博客 react native启动页制作,隐藏启动白屏,打打广告 这篇文章是根据开源项目react-native-splash-screen来写的。在使用reac...
  • BougieInfance
  • BougieInfance
  • 2018-04-17 17:56:12
  • 24

基于React Native构建的仿京东客户端(一) - 实现沉浸式状态栏和搜索栏

创建JdApp项目:myths-Mac:~ myth$ react-native init JdApp创建images文件夹,下载图片素材,将banner,header,home_icons,tabs...
  • zhengzizhi
  • zhengzizhi
  • 2018-04-10 23:30:38
  • 102

React Native 学习笔记(一)--init 项目 和 运行项目

首先,学习React Native首要的条件就是要有环境,至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同,我这边是Windows环境(这里不说...
  • uana_777
  • uana_777
  • 2016-11-29 14:47:59
  • 3914

react native项目创建

react native项目创建、运行、调试 1、项目命令行创建、运行 react-native init myrnprj1 // 创建工程 cd myrnprj1 react-native s...
  • keen_zuxwang
  • keen_zuxwang
  • 2017-05-08 20:40:46
  • 1029

【React Native开发】React Native For Android环境配置以及第一个实例(1)

(一)前言                FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然...
  • jiangqq781931404
  • jiangqq781931404
  • 2016-01-04 16:56:29
  • 19353

创建react-native项目

1、删除C:\Users\user\.yarnrc,C:\Users\user\.node_repl_history这两个文件 2、命令行中输入:react-native init demo 3、...
  • xiongge2005
  • xiongge2005
  • 2017-05-31 16:20:21
  • 533

React Native For Android学习之路-创建自定义原生模块

http://www.jianshu.com/p/fb451435a425?nomobile=yes http://www.jianshu.com/p/fb451435a425?nomobi...
  • u011904605
  • u011904605
  • 2016-11-25 21:32:45
  • 247
    个人资料
    等级:
    访问量: 188
    积分: 31
    排名: 194万+
    文章分类
    文章存档