React Native 开发豆瓣评分(一)环境搭建&配置模拟器
详细可参考 官方文档,这里进记录一些重要过程。
安装环境
下载 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 开发豆瓣评分(一)环境搭建&配置模拟器的更多相关文章
- React Native 开发豆瓣评分(八)首页开发
首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...
- React Native 开发豆瓣评分(二)路由配置
路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...
- React Native 开发豆瓣评分(五)屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...
- React Native 开发豆瓣评分(四)集中管理 fetch 数据请求
豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...
- React Native 开发豆瓣评分(三)集成 Redux
什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...
- React Native 开发豆瓣评分(七)首页组件开发
首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView ...
- React Native 开发豆瓣评分(六)添加字体图标
添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...
- React Native在window下的环境搭建(二):创建新项目
React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...
- React Native在window下的环境搭建(一)
React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...
随机推荐
- 【转】把sqlite3数据导入到MySQL中
之前我们默认使用的是SQLite数据库,我们开发完成之后,里面有许多数据.如果我们想转换成Mysql数据库,那我们先得把旧数据从SQLite导出,然后再导入到新的Mysql数据库里去. 1.SQLit ...
- bootstrap 输入框只能数字和字母等其他限制
--输入中文.数字.英文: <input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"> --输入数 ...
- 图片缩放——利用layui的滑块
@layui官网文档.@参考博客 参考博客中能实现,但是效果差强人意,在前辈的基础上进行了改造,并支持了动态多图列表 <%@ page language="java" con ...
- c# 子线程与主线程通信二
之前写过使用线程上下文实现线程同步,今天利用子线程向主线程发送事件,实现子线程与主线程的同步 基本步骤 1.定义类 using System; using System.Collections.Gen ...
- 编译安装hls协议切片工具 m3u8-segmenter
操作系统:Ubuntu16.04.4 amd64 安装http://m3u8-segmenter.inodes.org/方式安装m3u8-segmenter报错,于是有了这篇文章 apt instal ...
- DELPHI XE MYSQL数据库操作类 MYSQLHELPER
注: 无需odbc配置 {* * MySQL Helper v1.0 * 2015.6.19 * 说明: * 这是一个操作MySQL的类,该类必须和libmysql.dll,dbxmys.dll两个文 ...
- 【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] ...
- ASP.NET(C#)图片加文字、图片水印,神啊,看看吧
ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...
- 单元测试-测试技术(Unit Test)
1.1白盒测试和单元测试的区别的论述: 1) 单元测试和白盒测试是不同的,虽然单元测试和白盒测试都是关注功能,虽然他们都需要代码支持,但是级别不同, 白盒测试关注的是类中一个方法的功能是更小的单位,但 ...
- 虚拟机VMWare的操作
软件测试工程师需要搭建测试环境——虚拟机操作. VMWare Workstation虚拟机:模拟真实的环境进行各种试验和操作,启动之后,会占用一部分的系统资源. 官网安装:http://www.vmw ...