zoukankan      html  css  js  c++  java
  • 在windows下搭建React Native Android开发环境

    1.登录 React Native 中文网
    http://reactnative.cn/docs/0.45/getting-started.html

    2.登录 Chocolatey 下载包管理工具
    https://chocolatey.org/

    3.打开 cmd 复制粘贴 Cmd.exe 中的命令代码
    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin

    @"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin"

    4.安装nodejs
    choco install nodejs.install

    5.安装python2
    choco install python2

    6.安装脚手架
    npm install -g react-native-cli

    7.创建项目
    react-native init newPro

    8.dirr 查看项目目录

    9.安装jdk

    10.安装android studio

    11.启动模拟器

    12.运行react native

    第一步:react-native start

    第二步:react-native run-android (重新开启一个终端)

    13.手机或模拟器出现红底报错页面

    14.摇一摇,出现操作列表

    15.点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

    填入的的IP就是电脑的IP,不知道的话可以在命令行中输入ipconfig进行查询(但是不要在
    上面的两个git bash里面查询),端口号固定8081。

    16.再次摇一摇,选择Reload

    17.找到项目文件下的 index.android.js 编写程序,摇一摇,选择Reload

    常见问题:

    1.项目创建过程中没有问题,但执行 $ react-native run-android 报错

    $ react-native run-android
    Scanning 554 folders for symlinks in C:UsersAdministratorDesktop eact-
    native ewPro ode_modules (73ms)
    Starting JS server...
    Building and installing the app on the device (cd android && gradlew.bat
    installDebug)...

    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring project ':app'.
    > SDK location not found. Define location with sdk.dir in the local.properties
    file or with an ANDROID_HOME environment variable.

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug
    option to get more log output.

    BUILD FAILED

    Total time: 2 mins 31.924 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html

    原因解析:

    无法找到SDK路径

    解决方案:

    在android文件夹下,新建 local.properties,添加路径

    例:sdk.dir = /Users/hema/Library/Android/sdk

    sdk.dir = D:/adt/sdk

    2.没有接受SDK组件的许可协议

    Warning: License for package Android Support Repository not accepted.

    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring project ':app'.
    > You have not accepted the license agreements of the following SDK components:
    [Android Support Repository].
    Before building your project, you need to accept the license agreements and
    complete the installation of the missing components using the Android Studio SDK
    Manager.
    Alternatively, to learn how to transfer the license agreements from one
    workstation to another, go to http://d.android.com/r/studio-ui/export-
    licenses.html

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug
    option to get more log output.

    BUILD FAILED

    Total time: 1 mins 44.091 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html


    原因解析:

    没有接受SDK组件的许可协议

    解决方案:

    打开 SDK Manager.exe,在Extras下面找到 Android Support Repository 并 install

    3.设备没有连接上

    :app:assembleDebug
    :app:installDebug
    10:35:45 E/adb: Unable to obtain result of 'adb version'
    :app:installDebug FAILED

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ':app:installDebug'.
    > com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. ADB location: D:adtsdkplatform-toolsadb.exe

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

    BUILD FAILED

    Total time: 5 mins 57.339 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html

    原因解析:

    设备没有连接上

    解决方案:

    (1) 执行 $ adb devices 发现 5037端口被占用

    (2) 执行 $ netstat -aon|findstr "5037" 找到占用端口号的pid

    (3) Ctrl + Shift + Esc 打开任务管理器 找到对应的PID,并结束该进程(我的是360手机助手,坑啊)

    (4) 重新执行 react-native run-android

    4.执行 react-native start 报错

    Loading dependency graph, done.
    ERROR EPERM: operation not permitted, lstat 'C:UsersAdministratorDesktopmarketMarketandroidappuildintermediatespre-dexed
    debugdebug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar'
    {"errno":-4048,"code":"EPERM","syscall":"lstat","path":"C:\Users\Administrator\Desktop\market\Market\android\app\build
    intermediates\pre-dexed\debug\debug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar"}
    Error: EPERM: operation not permitted, lstat 'C:UsersAdministratorDesktopmarketMarketandroidappuildintermediatespre-dexeddebug
    debug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar'

    问题解析:

    不允许操作

    解决方案:

    保持 react-native run-android 的命令终端不动,重新执行 react-native start 即可。

    5.Navigator 报错

    Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react-native’.

    原因解析:

    根据信息,react-native这个包中的Navigator已经被移除,而需要导入react-native-deprecated-custom-components这个包来使用Navigator。

    解决方案:

    1. 通过npm安装相应的库
      在项目根目录下输入npm install react-native-deprecated-custom-components --save 回车。

    2. 在使用的JS文件中将Navigator引入进来,就是import
      import {Navigator} from ‘react-native-deprecated-custom-components’;

    然后就可以在项目中正确使用Navigator了。

  • 相关阅读:
    OA系统配置文件
    OA系统配置文件
    OA系统配置文件
    OA系统配置文件
    如何在github上递交高质量的pull request
    如何在github上递交高质量的pull request
    如何在github上递交高质量的pull request
    如何在github上递交高质量的pull request
    Python 变量作用域
    python match search 和不匹配
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7121825.html
Copyright © 2011-2022 走看看