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

安装环境

  • 下载 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. Navigator的使用:

    1.路由直接跳转到下一个页面: Navigator.pushNamed(context,"/login"); 2.跳转的下一个页面,替换当前的页面: Navigator.of(co ...

  2. DRBD UpToDate/DUnknown 故障恢复

    故障如下: root@drbd1:~# drbd-overview 0:data/0 StandAlone Primary/Unknown UpToDate/DUnknown /data/mysql ...

  3. ABAP DEMO ALV-监听数据修改

    *&---------------------------------------------------------------------* *& Report YDEMO_006 ...

  4. 组件文档系统-mdx-react-docz

    推荐指数:

  5. C# 获取或设置指定 config 文件的值

    ExeConfigurationFileMap 这个类提供了修改.获取指定 config 的功能:新建一个 ExeConfigurationFileMap 的实例 ecf :并设置 ExeConfig ...

  6. git 本地项目推送到远程服务器

    3进入本地电脑的将要上传的项目的目录下面 1)git  init 初始化一个git 2) vim .gitignore 新增以及编写这个文件 node_modules/ 意思就是上传的时候忽略这个文件 ...

  7. json 反序列化成键值对

    通过JsonConvert.DeserializeObject<Dictionary<string, object>>(string value)方法反序列化为字典数据,在通过 ...

  8. nginx配置访问本地静态资源

    下面说说如何在windows下使用nginx作为静态资源服务器, 1.修改config目录下,这个配置文件,基本上所有的配置都在这里面做, 2.主要的配置参数如下,一些无关的参数我直接去掉了,注意,里 ...

  9. [转帖]Hadoop与Spark比较

    Hadoop与Spark比较 https://www.cnblogs.com/charlesblc/p/6206198.html 感觉自己落下好多东西没有学习 先看这篇文章:http://www.hu ...

  10. 用Gson实现json与对象、list集合之间的相互转化

    先写一个Person实体类,导入Gson包 String jsonData="{\"userid\":\"1881140130\"}";// ...