React-Native两种环境的搭建

原创 2018年04月16日 15:31:02

    2018.4.16   根据官网http://facebook.github.io/react-native/docs/getting-started.html搭建。

    系统基本信息:Windows 7 32位。

    

    总共存在两种运行环境,第一种环境是纯JS写App。第二种环境是当纯JS提供的功能或者性能不能时,使用原生的Java或Object-C等来补充,混合代码来写App.

    通过这篇文章,你可以配置好两种环境,并运行起一个简单示例程序。

下面详细介绍遇到的各种问题:

第一种环境:使用create-react-native-app配合Expo App

    见http://facebook.github.io/react-native/docs/getting-started.html

    依次安装,安装完成按照说明使用即可。中间可能遇到的问题:

1.    Expo App下载不了。因为被和谐了,不能翻墙的可以去CSDN搜索Expo下载。但是也只有Android版本的Expo

2.    Expo超时问题

    解决问题

    第一步:

    一定要保证手机和电脑在同一个IP段内!

    可以这样来检测:

    手机连上WIFI后,查看WIFI详情,可以看到手机连上的路由器地址

    电脑上命令行输入ipconfig,查看电脑的 IPv4地址.

    需要保证这两个地址的前3位是相同的。

    如果不同,你需要让你的手机Wifi与你的电脑的网络在同一个路由器下。

    第二步:检测电脑端是否有类似于ViturlBox之类的虚拟设备。如果有,在命令行输入:

    setREACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69//第一步的电脑端的ipv4地址

    第三步:npm start之后,出现了二维码之后,会出现一个 exp://192.168.0.1:19000类似的地址(可能你的是exp://192.168.1.101:19000)。把exp:替换成http:,在手机端和电脑端分别访问 http://192.168.0.1:19000。

        看是否会显示一些字符串。如果不是,则去检测电脑和手机是否对19000端口有限制。

       百度搜索:电脑如何设置端口

 如何运行第一种环境:官网上详细说明。


第二种环境:使用create-native-cli配合Android Studio

http://facebook.github.io/react-native/docs/getting-started.html

切换到Building Projects with Native Code 选项卡,依照这里的提示依次进行。

可能遇到的问题:

1.    Android Studio 的Setting-Appearance&Behavior-Appearance-System Settings 下没有Android SDK选项

        解决:在Setting-Plugins下,勾选上AndroidSupport,并重启。如果这时提示有些什么依赖没有安装,先把这些依赖不勾选。

2.    提示没有SDK

    360安全卫士搜索 Android SDK,下载第一个安装。在其安装目录下打开Sdk Manager.exe安装官网所要求的包。并将这个SDK目录添加进Android Studio和系统 Path下。

    如果出现下载速度过慢,可以考虑切换代理:百度搜索:android studio 代理。

3.    打开Android Studio后,新建一个空的工程。如果你的系统是32位的。下面的控制台可能提示不兼容当前系统版本:

    https://blog.csdn.net/wang_qian_kun/article/details/72526251

4.    打开Android Studio后,新建一个空的工程。可能还提示一些什么插件没有安装,没事,点击,缺啥安啥。可能还提示一些错误,没事,提示什么就去百度,都是小问题。

 

 

因为Android Studio自带的模拟器很渣,所以建议安装Genymotion来代替。自行搜索下载安装即可。

遇到的问题:

1.    安装Genymotion,其自动会安装 VirutalBox.安装之后,打开Genymotion,若提示VirutalBox 错误,获取VirutalBox对象失败:

https://www.cnblogs.com/imzhi/p/solution-to-the-failed-to-get-the-virtualbox-com-object.html

2.    需要注册一个谷歌账号,并且在这个genymotion登陆。视网络情况,可能需要翻墙

3.    打开Genymotion.提示Adb.exe已停止工作:

    在Genymotion里选择Setting-ADB-Usecustom Android SDK tools选择本地Android Sdk目录(比如D:\ProgramFiles\Sdk).并重启电脑

 

    或者也可以使用VisualStudio Emulator for Android来代替.(因为需要64位系统,所以我并未测试过,见https://reactnative.cn/docs/0.51/getting-started.html#visual-studio-emulator-for-android)

如何运行第二种环境:

    如果一切准备就绪,打开Genymotion,点击Add,选择一种设备,此时会自动下载。下载速度其慢无比,建议翻墙。下载完成后,可以对这个设备进行一些配置,如果电脑比较差,需要把设备的内存调低一点。再启动这个设备。再在命令行里当前项目下运行react-native run-android


-ByPY

Windows 系统下搭建React-Native 开发环境

元旦放假三天,拿出一天研究了下React-Native的开发: react-native , 优缺点就不介绍了先, 以Windows 10 版本 开发Android 版本为例...
  • Erpkotdroid
  • Erpkotdroid
  • 2017-12-31 21:46:33
  • 332

Windows上搭建React-Native开发环境

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

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

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

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

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

Mac下搭建React Native iOS开发环境

搭建React Native iOS开发环境
  • liang890806
  • liang890806
  • 2017-01-13 01:59:05
  • 943

Windows10下搭建React Native Android开发环境

react-native的GitHub地址:https://github.com/facebook/react-native react-native的文档地址:http://facebook....
  • klxh2009
  • klxh2009
  • 2016-03-05 14:41:36
  • 2343

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
  • 4111

react-native如何搭建开发环境搭建上手教程(转)

本文主要介绍Facebook开源的react-native编程语言和环境搭建教程。
  • qq_16628781
  • qq_16628781
  • 2015-11-01 09:03:57
  • 1003

简单的两种浏览器环境搭建

在做到一些需要获取数据,或者用到json项目中,浏览器会出现跨域问题。这里需要搭建简单的浏览器环境或者更改chrome本地配置。   如图,直接运行项目情况。        解...
  • wl11295210
  • wl11295210
  • 2017-02-06 15:05:19
  • 324

mac搭建react-native环境

参考官网:http://reactnative.cn/docs/0.45/getting-started.html搭建环境, 这里说说遇到的几个坑: 1、首先安装xcode,安装最新版本,不然编译不过...
  • xiongge2005
  • xiongge2005
  • 2017-06-14 16:13:45
  • 156
收藏助手
不良信息举报
您举报文章:React-Native两种环境的搭建
举报原因:
原因补充:

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