react-native 简介及环境

简介:

react-native 简介及环境

概要

  • react native
  • 环境搭建
  • hello react native
  • react native 发布

react native

优势

  1. 不用再学习 OC,Swift,Java,Kotlin 等
  2. 复用 react 开发的种种好处
  3. 开发体验好(即时编译)
  4. 编译出来的是原生应用,不是 html5 app,也不是 hybrid app
  5. 可以方便的和原生代码写的控件集成

劣势

  1. 还在发展中,更新频繁,既有可能存在暗坑
  2. 性能调优的方式没有真正的原生开发多

环境搭建

npm install -g react-native-cli
npm install -g create-react-native-app
npm install -g watchman

hello react native

  1. 创建工程

    create-react-native-app sample
  2. 启动工程

    cd sample
    yarn start
  3. 通过 expo 来查看运行结果

发布

android 发布

下载 android 环境

  1. 下载 android sdk(如果不用 android studio 开发,可以只下载 sdk 即可)
  2. 下载地址:https://developer.android.com/studio/index.html

配置 android 环境

解压 sdk 到 opt/android

配置 .zshenv / .bashenv

export ANDROID_HOME=/opt/android
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

安装 platform-tools

cd $ANDROID_HOME
./tools/bin/sdkmanager platform-tools

安装 build-tools

cd $ANDROID_HOME
./tools/bin/sdkmanager "build-tools;23.0.1"

创建签名

yarn eject
cd android
keytool -genkey -v -keystore my-app-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000

创建签名时,密码用 123456

配置签名

  1. vim ./android/gradle.properties

    MYAPP_RELEASE_STORE_FILE=my-app-key.keystore
    MYAPP_RELEASE_KEY_ALIAS=my-app-alias
    MYAPP_RELEASE_STORE_PASSWORD=123456
    MYAPP_RELEASE_KEY_PASSWORD=123456
    把生成的文件 my-app-key.keystore 放入 android/app 文件夹下
  2. vim ./android/app/build.gradle

    android {
        defaultConfig {... ...}
          signingConfigs {
              release {
                  if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                      storeFile file(MYAPP_RELEASE_STORE_FILE)
                      storePassword MYAPP_RELEASE_STORE_PASSWORD
                      keyAlias MYAPP_RELEASE_KEY_ALIAS
                      keyPassword MYAPP_RELEASE_KEY_PASSWORD
                  }
              }
        }
        buildTypes {
            release {
              ... ...
                signingConfig signingConfigs.release
            }
        }
    }

发布

cd android
./gradlew assembleRelease

生成的 apk 在 app/build/outputs/apk 下

附录

启动一直卡在 Starting packager…

修改如下内核参数后再启动:

sudo sysctl -w fs.inotify.max_user_watches=1000000

永久修改此参数,可以把这个配置加入到: /etc/sysctl.conf 中

./gradlew assembleRelease 时无法运行 aapt

java.io.IOException: Cannot run program "/opt/android/build-tools/23.0.1/aapt": error=2, No such file or directory

安装 确实的 package

sudo  apt-get install lib32stdc++6 lib32z1

Couldn't find preset "babel-preset-react-native-stage-0/decorator-support"

安装相应的 package

cd ..
yarn add babel-preset-react-native-stage-0
cd android
./gradlew assembleRelease
标签:  前端开发


本文转自wang_yb博客园博客,原文链接:http://www.cnblogs.com/wang_yb/p/8120431.html,如需转载请自行联系原作者

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript 算法
第一章 react简介
第一章 react简介
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
3月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
44 0
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
48 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
38 3