ReactNative for Android入坑(一)

时间:2024-06-15 08:04:07

  最近找工作发现有些公司要求会ReactNative,决定入坑。

  1. 搭建环境:官网详细的教程附链接

    • 坑一:*,建议整个搭建过程中*。(*链接,注册有200M试用流量,环境搭建够了)
      第一步:安装Chocolatey,管理员运行cmd,输入指令:
      Chocolatey安装官网指令:@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

      第二步:安装node.js ,指令:choco install nodejs.install

      第三步:安装python,指令:choco install python2

      第四步:安装ReactNative的命令行界面,指令:npm install -g react-native-cli

      以下是AndroidStudio的配置过程,由于我早已配置不再提。

  2. 运行第一个程序:官网教程(链接同搭建环境)。

    • 坑二:初始化项目,默认cmd的cd的文件夹。

      第一步(可忽略):cmd命令行切换到创建项目的目标文件夹。

      第二步:创建一个名为AwesomeProject的项目:react-native init AwesomeProject

      第三步:切入AwesomeProject项目内:cd AwesomeProject

      第四步:运行AwesomeProject程序:react-native run-android

    • 坑三:第四步过程要*,下载gradle。
    • 坑四:下载的gradle后,debug.apk可能不能安装到手机。

      解决方法:我以项目AwesomeProject为例,找到项目AwesomeProject,进入AwesomeProject文件夹,进入android文件夹,找到buidle.gradle,以文本形式打开,找到以下代码:

       dependencies {
      classpath 'com.android.tools.build:gradle:1.3.1' // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
      }

      改为:

       dependencies {
      classpath 'com.android.tools.build:gradle:1.2.3' // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
      }

      再运行第四步。

    • 坑五:安装成功,红屏报错,Could not get BatchedBridge

      ReactNative for Android入坑(一)

      cmd中指令:adb shell input keyevent 82

      弹出的Developer Menu 中选择:Dev Settings

      Dev Settings中选择:Debug server host for device

      对话框中填入IP地址和端口:如 10.0.0.1:8081

      返回Developer Menu,选择Reload JS (我没有直接返回到Developer Menu只好:adb shell input keyevent 82)

      等待应用重启。

      (程序完成后提示的另外一种进入Developer Menu的方法:摇动手机。我是手机平放,左右晃动,摇出了Menu)

以下申明:

  1. 我在Windows下安装适合Android的环境,以真机测试,另由于各手机,PC具体设置,配置不同仅供参考。
  2. 我只介绍自己遇到的情况,不是全部。
  3. 建议尝试前AndroidStudio配置好ANDROID_HOME,ANDROID_SDK_HOME等变量,不然可能应用安装不到模拟器上。