win上搭建react-native android环境

  • Z时代
  • 2024-01-10
  • 分类：综合

react

http://www.jianshu.com/p/2fdc4655ddf8

http://www.lcode.org/

http://www.jianshu.com/p/ad29d97b0e9d

学习

  1. 安装JDK
    既然是android开发，那么java肯定逃不掉了。从Java官网下载安装包吧。我的电脑是64位的，所以我选择下载64位的安装包。

  2. 安装Android SDK
    先下载Android Studio，如果FQ不方便的话，可以从AndroidDevTools上下载，我是FQ从官网下载的。安装过程中会提示选择SDK的目录，默认是在系统盘，我选择的是F/android/sdk。安装完成后，先要配置一下sdk Manager的网络设置，否则在不FQ的情况下安装sdk会很慢很慢。腾讯Bugly的镜像就挺好的，查看说明。
    安装以下项目：

    • Tools/Android SDK Tools (24.4.1)

    • Tools/Android SDK Platform-tools (23.0.1)

    • Tools/Android SDK Build-tools (23.0.2)

    • Android 6.0 (API 23)/SDK Platform (1)

    • Extras/Android Support Library(23.1)

最后在系统环境变量中加入ANDROID_HOME，路径为sdk目录。

    1. 安装Git
      下载Git，记得把git.exe的路径写入系统环境变量，因为在执行react-native init命名时会调用git去下载react-native的源码。

    2. 安装Node.js
      到官网下载最新版的安装包安装即可。npm（node package manager）是随着node.js就安装好的，为了加速安装其他的package，在cmd里输入以下命令：

      npm config set registry https://registry.npm.taobao.org
      npm config set disturl https://npm.taobao.org/dist

    3. 安装react-native命令行工具

      npm install -g react-native-cli

    4. 创建react-native android项目

      react-native init MyProject

      这一步要等上很长时间，原因不明。不想等待的话可以在这里下载项目文件，然后将android目录下的gradle.properties文件中的sdk.dir设为本机上sdk的目录。

      sdk.dir=F:\\android\\sdk

    5. 启动react-native服务
      进入项目文件夹，输入启动命令

      react-native start

      在浏览器中访问地址：http://localhost:8081/index.android.bundle?platform=android
      第一次访问需要骚等一会，这是在生成android的bundle文件。cmd窗口别关，一直保持开启状态。

    6. 安装并启动android模拟器
      推荐逍遥模拟器，安装好并启动。试用了很多模拟器，有些模拟器adb无法连接，有些模拟器adb连上了，但是在却没有“摇一摇”或者菜单键，非常蛋疼。终于让我发现了逍遥模拟器，嗯，很不错。

    7. 在模拟器中运行
      进入项目目录，输入命令：

      react-native run-android

      第一次运行时会需要下载一些东西，等待就行。
      build成功后便会在模拟器上自动运行了


      react-native的hello world


      如果是连真机的话，很大可能看到的结果是一片白啊一片白。经查，发现是安全中心中的“悬浮窗”权限并没有对我们的这个新app开放，那么将权限开放，重启app，啊呀，一片红啊一片红。。。长按物理菜单键或者死命摇一摇手机，会弹出一个小窗口，选择“Dev Settings”，然后选择“Debug server host for device”，会弹出一个输入框，输入电脑ip地址和默认的8081端口，再次重新app，啊呀，粗线了粗线了。。。

以上是 win上搭建react-native android环境 的全部内容， 来源链接： utcz.com/z/381807.html

回到顶部