详细可参考 官方文档,这里进记录一些重要过程。

安装环境

  • 下载 Android Studio 选择 Custom 进行安装:

    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM) (AMD 处理器看这里)
    • Android Virtual Device
  • 安装各 SDK,推荐使用 choce 进行安装,非常简单:

    powershell -NoProfile -ExecutionPolicy Bypass -Command "iex  ((new-object net.webclient).DownloadString('https://choc olatey.org/install.ps1' ))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin 不行的话使用:@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https ://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  • 使用 choco 安装 jdk8,python2

    choco install python2 jdk8
  • 安裝 yarn react-native-cli

    npm install -g yarn react-native-cli
  • 使用 VSCode 进行环境配置,参考:https://www.cnblogs.com/hl1223/p/11049968.html

  • 创建 React Native 应用

    react-native init ReactNativeDouban

运行应用

由于 Android Studio 模拟器特别占内存,所以推荐使用一些其他的三方模拟器进行开发,如 夜神模拟器

使用夜神模拟器,需要将 Android\SDK\platform-tools 目录下的 adb.exe 拷贝到夜神模拟器的安装目录的bin目录下,重命名为 nox_adb.exe 替换目录里的 nox_adb.exe 文件。

此时 adb devices 就可以看到如下内容

在 VSCode 按 F5 运行 应用,发现夜神模拟器连接不了设备,红屏报错:Could not connect to development server,如下:

这是因为模拟器和电脑不在同一个网段,需要让模拟器连接 RN 开的代理接口,过程如下(点击菜单、选择 dev setting,点击 debug server 输入本机ip和8081端口):

然后在重新运行即可出现正确内容:

React Native 开发豆瓣评分(一)环境搭建&配置模拟器的更多相关文章

  1. React Native 开发豆瓣评分(八)首页开发

    首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...

  2. React Native 开发豆瓣评分(二)路由配置

    路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...

  3. React Native 开发豆瓣评分(五)屏幕适配方案

    前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

  4. React Native 开发豆瓣评分(四)集中管理 fetch 数据请求

    豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...

  5. React Native 开发豆瓣评分(三)集成 Redux

    什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...

  6. React Native 开发豆瓣评分(七)首页组件开发

    首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView ...

  7. React Native 开发豆瓣评分(六)添加字体图标

    添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...

  8. React Native在window下的环境搭建(二):创建新项目

    React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...

  9. React Native在window下的环境搭建(一)

    React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...

随机推荐

  1. 【转】把sqlite3数据导入到MySQL中

    之前我们默认使用的是SQLite数据库,我们开发完成之后,里面有许多数据.如果我们想转换成Mysql数据库,那我们先得把旧数据从SQLite导出,然后再导入到新的Mysql数据库里去. 1.SQLit ...

  2. bootstrap 输入框只能数字和字母等其他限制

    --输入中文.数字.英文: <input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"> --输入数 ...

  3. 图片缩放——利用layui的滑块

    @layui官网文档.@参考博客 参考博客中能实现,但是效果差强人意,在前辈的基础上进行了改造,并支持了动态多图列表 <%@ page language="java" con ...

  4. c# 子线程与主线程通信二

    之前写过使用线程上下文实现线程同步,今天利用子线程向主线程发送事件,实现子线程与主线程的同步 基本步骤 1.定义类 using System; using System.Collections.Gen ...

  5. 编译安装hls协议切片工具 m3u8-segmenter

    操作系统:Ubuntu16.04.4 amd64 安装http://m3u8-segmenter.inodes.org/方式安装m3u8-segmenter报错,于是有了这篇文章 apt instal ...

  6. DELPHI XE MYSQL数据库操作类 MYSQLHELPER

    注: 无需odbc配置 {* * MySQL Helper v1.0 * 2015.6.19 * 说明: * 这是一个操作MySQL的类,该类必须和libmysql.dll,dbxmys.dll两个文 ...

  7. 【helm & Tiller】报错Error: incompatible versions client[v2.14.1] server[v2.13.0] │

    helm是helm的客户端部分 tiller是helm的服务器端部分 报错 报错Error: incompatible versions client[v2.14.1] server[v2.13.0] ...

  8. ASP.NET(C#)图片加文字、图片水印,神啊,看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  9. 单元测试-测试技术(Unit Test)

    1.1白盒测试和单元测试的区别的论述: 1) 单元测试和白盒测试是不同的,虽然单元测试和白盒测试都是关注功能,虽然他们都需要代码支持,但是级别不同, 白盒测试关注的是类中一个方法的功能是更小的单位,但 ...

  10. 虚拟机VMWare的操作

    软件测试工程师需要搭建测试环境——虚拟机操作. VMWare Workstation虚拟机:模拟真实的环境进行各种试验和操作,启动之后,会占用一部分的系统资源. 官网安装:http://www.vmw ...