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

安装环境

  • 下载 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. STM32---喜提点灯

    一:编译第一个程序 int main() //主函数 { } void SystemInit() //在执行主函数前,会被调用.不进行实现.在启动文件中被调用 { } ; Reset handler ...

  2. URL相关的工具类

    package com.opslab.util.web; import com.opslab.util.CharUtil;import com.opslab.util.CharsetUtil;impo ...

  3. 了解有后门的sshd服务是如何劫持密码的

    在服务器上安装一个打了后门补丁的sshd服务,当用户连接时,直接把密码记录下来,然后使用脚本发送到邮箱中. (1).实验环境 使用CentOS6.2作为系统环境,查看sshd和gcc的版本 [root ...

  4. log4net示例2-日志输入存入Access(转)

    需求:基于log4net组建,创建Console程序将日志输出到Access数据库. 具体实施: (1)创建控制台程序. (2)控制台程序中,添加一个纯文本文件,文件命名为“log-Access.se ...

  5. POJ 3903 Stock Exchange 最长上升子序列入门题

    题目链接:http://poj.org/problem?id=3903 最长上升子序列入门题. 算法时间复杂度 O(n*logn) . 代码: #include <iostream> #i ...

  6. JS中search查找某些内容,正则表达式|查找分隔的任何项

    JS中可以用indexOf来查找某个字符串里的某些内容的索引,也就是在字符串的位置.如果存在该字符串,会返回该字符串的索引,如果不存在会返回-1,可以通过某些内容的索引是否为-1判断是否存在该字符串. ...

  7. html如何修改hr水平直线的粗细

    hr是常见的超文本标签,是一条水平直线,要设置该直线变粗一些.可以先把hr本身的border隐藏掉,然后设置border-top-width,也就是只留上边框,如图:hr的默认高度height是0,所 ...

  8. 利用VisualSVN修改配置库名称

    相信大家都听说过SVN的大名,至于它的用途以及如何安装不在本文范围内,这里主要讲解如何利用VisualSVN来更改配置库的名称,前提是你的SVN服务必须用VisualSVN搭建,网上几乎没有这方面的文 ...

  9. C# .NET WINFORM MUTEX 互斥

    static class Program 里的全局变量: static System.Threading.Mutex appMutex; Main 方法里的内容: string exeName = & ...

  10. 第07组 Alpha冲刺(4/4)

    队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:学习了很多东西 Github签入记录 接下来的计划:继续学习 还剩下哪些任务:后端部分 燃尽图 遇到的困难:自己太菜了 收获和疑问: ...