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

原创 2018年04月16日 14:39:16

      从最近移动端市场的需求来看,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

下载安装完成后,就可以使用命令安装工具了。

2.安装Python

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

choco install python2

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

3.安装Node.js

choco install nodejs.install

设置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 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
问题二:




安装和配置 Windows Server 2016

-
  • 1970年01月01日 08:00

一.React-Native学习之Window环境下搭建环境配置

一.安装JDK       1.从Java官网下载JDK并安装。 也可以从百度云下载x64版本       2.安装成功可以用java -version查看版本信息       3. 配置环境变...
  • nnmmbb
  • nnmmbb
  • 2017-06-02 14:13:25
  • 1274

react-native在windows下安装和配置

本次安装时基于windows7系统,32位,在虚拟机上面安装的。1、安装JDK,配置环境变量。下载JDK,然后配置环境变量JAVA_HOME,还是按照正规路径来,不然编译时候找不到就尴尬了。 然...
  • cjs68
  • cjs68
  • 2016-12-07 15:31:43
  • 3218

windows 64位下,React-Native环境搭建详解 (Android)

React-Native环境搭建需要: 1、安装Java JDK 2、安装Android Studio 3、安装node.js 4、安装git 5、安装Python 2.x (注意目前不支持...
  • u012121105
  • u012121105
  • 2017-07-17 18:40:01
  • 4138

Windows上搭建React-Native开发环境

技术是进步的,如果你还在为纠结学习Android还是IOS,那么你已经OUT了,这是网友说的。React-Native怎么样我还不知道,只知道要学习这个东西。今天给大家说一说,如何在Windows上搭...
  • u010886975
  • u010886975
  • 2017-06-21 18:19:09
  • 645

React Native环境配置之Windows版本搭建

学习H5 Web开发怎么和安卓原生开发共存呢,React Native直接解决了这个问题:在运用H5开发的同时,还可以有效调用android原生态开发,直接两者兼具,既保留了android原生开发也运...
  • guiman
  • guiman
  • 2016-12-10 22:07:48
  • 7416

详细讲解如何在windows下搭建react-native的开发环境(包括在设备上安装和运行react-native app )!

(前言) 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行...
  • raoJinwei
  • raoJinwei
  • 2017-04-19 10:40:06
  • 6495

windows安装pyspider(32位)环境

  • 2016年09月03日 00:21
  • 38.42MB
  • 下载

android--React-Native(Windows)中的配置

1、首先进入React-Native的官网       http://reactnative.cn/docs/0.40/getting-started.html---------对应的文档 根据文档...
  • Happy_Develop_
  • Happy_Develop_
  • 2017-01-20 14:03:52
  • 840

WebStorm12配置react-native运行命令

步骤一步骤二步骤三步骤四步骤五
  • liuzonrze
  • liuzonrze
  • 2016-12-22 21:13:04
  • 1629
收藏助手
不良信息举报
您举报文章:Windows下配置React-native环境问题总结
举报原因:
原因补充:

(最多只允许输入30个字)