美文网首页
React Native 使用笔记(一)

React Native 使用笔记(一)

作者: 或者你喜欢梅西吗 | 来源:发表于2019-05-13 23:19 被阅读0次

    背景

    最近公司接了一个项目,需要做移动端,由于没有IOS相关的人员,为了减少学习成本,就打算使用的混合开发的技术。简单了解了一下,现有跨平台方案有:Flutter,React Native,Weex和Cordova这种hybride开发。考虑了一下技术的运行速度,支持平台,生态环境,上手速度。还是决定了使用React Native。主要是因为:

    • 客户需求简单,性能要求不高。
    • React Native发展时间久,依赖和资料比较多。
    • 团队内有前端经验的人多,上手较快。

    环境搭建

    环境搭建这一块,其实官网地址写的就很清楚了。如果懒得打开也可以直接看下面。
    必须安装的依赖有:Java,Node,Python2,Android Studio。
    注意 Node 的版本必须大于等于 10,不要使用cnpm,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。
    Java环境设置方法
    node环境设置方法
    Python环境设置方法

    Android环境设置

    1,安装Android Studio。

    下载地址:https://developer.android.com/studio/index.html。如果没有科学上网,可以使用下面的地址:https://www.androiddevtools.cn/

    2,安装Android SDK。

    Android Studio自带SDK,目前必须安装Android 9 (Pie)版本的 SDK。 也可以在 Android Studio 的Appearance & Behavior → System Settings → Android SDK下,自己手动设置SDK路径。
    SDK 默认是安装目录:c:\Users\你的用户名\AppData\Local\Android\Sdk

    3,配置 ANDROID_HOME 环境变量

    打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):


    ANDROID_HOME环境变量设置
    4,配置platform-tools 环境变量

    打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。默认路径为:c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools。
    至此,开发环境已经配置完成了。可以打开AS创建一个原生Android工程试试,是否可以正常运行。

    创建新React Native项目

    使用命令行创建项目

    react-native init AwesomeProject

    AwesomeProject 为创建项目的名字。这个步骤也会下载资源,注意网络环境。
    注意:请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!

    编译并运行 React Native 应用

    在项目创建完成之后,进入刚才创建的项目的目录。然后运行react-native run-android,类似:

    cd AwesomeProject
    react-native run-android

    注意:要已经连接了Android真机或者Android模拟器。此操作会下载大量的依赖,请保证网络畅通。
    运行成功之后APP会自动打开,并显示如下画面:

    node
    app

    相关文章

      网友评论

          本文标题:React Native 使用笔记(一)

          本文链接:https://www.haomeiwen.com/subject/umidaqtx.html