• ReactNative 环境的搭建和启动(安卓版)


    一、JAVA环境

    • 下载 JDK 8.0
    • 添加 %JAVA_HOME% 变量
    • 添加 PATH:%JAVA_HOME%in

    二、Android环境

    • 下载 Android SDK
    • 修复 SDK Manager.exe 闪退的问题
    • 用 SDK Manager.exe 安装 Android SDK platform-tools(adb)
    • adb 加入到 PATH

    三、ReactNative 环境

    • 下载 react-native-cli
    • 初始化脚手架:
    • 运行 $ react-native run-android,并一步步解决遇到的问题

    React Native 错误锦集: https://www.cnblogs.com/CyLee/p/9915837.html 


    一、JAVA环境

    1、下载 JDK 8.0:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    (ps: 笔者接触RN的时候JDK已经是11.0.2版本了,但由于接下来遇到兼容性问题(gradle不支持高版本),不得不改为较稳定和普遍的8.0版本)

    2、添加JAVA_HOME变量,指向jdk目录,如C:Program FilesJavajdk1.8.0_191

    3、添加PATH: %JAVA_HOME%in,打开CMD输入: java -version

    二、Android环境  

    1、下载 Android SDK:http://tools.android-studio.org/index.php/sdk

    2、修复 SDK Manager.exe 闪退的问题

    找到android.bat,在源码处找到
    set java_exe= 
    call libfind_java.bat
    改为
    set java_exe=C:Program FilesJavajdk1.8.0_121injava.exe
    
    找到for /f %%a in ('%java_exe% -jar libarchquery.jar') do set swt_path=lib\%%a
    改为
    set swt_path=libx86_64

    3、用管理员的权限打开SDK Manager.exe,下载Android SDK platform-tools

    4、将 android-sdkplatform-tools 目录加入到PATH

    5、然后在cmd输入:adb devices 

    6、用USE线连接Android手机,改为 调试模式MTP(多媒体传输),再次运行 adb devices,确保你的手机在列表中。

    如果依然不行,那么可能是你的USB线仅支持充电但不支持数据传输,据说较粗线的那种是提供数据传输功能的,换一种线试试。

    或者下载360助手,如果连360助手都不能连接你的手机,就说明你的USB线真的是有问题了。

     

    三、ReactNative 环境

    1、下载 react-native-cli

    $ npm install -g react-native-cli

    2、新建一个 react-native 脚手架

    $ react-native init learnRN

    进行到  Downloading https://services.gradle.org/distributions/gradle-4.4-all.zip 的时候,可能因为各种原因下载不了,但却可以用迅雷下载。

    下载成功 gradle-4.4-all.zip 之后,把它放在learnRNandroidgradlewrapper,然后打开 gradle-wrapper.properties 修改内容

    distributionUrl 改为:distributionUrl=./gradle-4.4-all.zip

    然后重新初始化项目。成功之后如图所示:

    3、初次的运行与安装

    $ react-native run-android

    、中间出现:Download https://dl.google.com/dl/android/maven2/com/android/tools/sdk-commo,由于我没有fq知道下载不了,直接取消了。再次执行居然没有这条了,但出现了下面的问题。

    、就出现了:build-tools;27.0.3 Android SDK Build-Tools 27.0.3。版本可能和我不一样,这时候使用 SDK Manager.exe 下载指定的版本即可。然后再试试,

     

    、又出现:platforms;android-27 Android SDK Platform 27,再次选择 Android 8.1.0(API 27)展开如图,选择 SDK platform 安装即可。

    话说回来,如果从一开始就可以fq就什么事情都没有了。但没办法只能这样曲线救国。后续倒也出现一些google.com的下载链接,但居然都下载成功了……

    、但最后又出现了:Execution failed for task ':app:installDebug'.... User rejected permissions, 好像是用户没权限,经过一系列倒腾,我领悟了可能是我手机没有给权限?但我华为手机确实开启了调试模式啊!然后往下拉,看到【选择USE配置】时,点击并且选择了【MTP(多媒体传输)】,然后再次执行。可以了。

    手机自动提示安装了learnRN的程序(如果没有,可能需要设置一下“显示悬浮窗”权限了,也可能是出现意外被屏蔽了。)

    经过一系列安装。最后呈现出来了。

    第二次运行

    当第二次运行时,我们不需要执行: $ react-native run-android ,只需要设置手机反向代理(请先确保adb devices能查找到你的手机且只有一条时才执行以下命令)

    $ adb reverse tcp:8081 tcp:8081

    然后执行

    $ react-native start 

     

    开始修改App.js

    打开/learnRN/App.js,随便修改一些内容来测试是否同步。

    export default class App extends Component<Props> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>Welcome to React Native! Fuckyou</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
            <Text style={styles.instructions}>{instructions}</Text>
          </View>
        );
      }
    }

    手机打开App,猛烈摇晃手机呼出菜单。

    点击 “Reload”,更新UI。

    开启调试窗口

    使劲摇动,呼出菜单,选择 “Debug JS Remotely” 选项。如果成功的话,你的电脑的浏览器自动打开 http://localhost:8081/debugger-ui/ ,打开控制台就可以开始调试之旅了。

  • 相关阅读:
    Vue Cli3.0 使用jquery
    使用js加载器动态加载外部js、css文件
    通过js获取本机的IP地址
    $.ajax 中的contentType类型
    vue中 :style 与 :class 三元运算符使用
    bootstrap table checkbox获得选中得数据
    vscode自动生成文件头部注释和函数注释
    axios二次封装的几种方法
    vue组件库element-ui 的Table内容显示不更新
    Linux中iptables设置详细
  • 原文地址:https://www.cnblogs.com/CyLee/p/9912977.html
Copyright © 2020-2023  润新知