ReactNative尝鲜

1,674 阅读2分钟

在Android的世界里畅游了许久,感受着其中无与伦比的魅力。如今,又站在ReactNative的大门入口,小心窥探这个世界。

项目地址(效果展示)

参考文档

ReactNative中文网:reactnative.cn
ReactNavigation导航:reactnavigation.org
Redux 中文文档:cn.redux.js.org/
Redux-saga 中文文档:leonshi.com/redux-saga-…

使用API

干货集中营API
知乎日报API

常用命令

以下命令只针对Windows平台

  1. 查看已连接设备:

    adb devices

  2. 查看Android模拟器列表:

    android list avd

  3. 指定name,启动模拟器:

    emulator -avd [name]

  4. 部署Apk,并运行:

    react-native run-android

  5. 开启开发者菜单【Ctrl+M】:

    adb shell input keyevent 82

  6. 开启packager服务【操作4部署apk同时也会开启packager服务】

    react-native start

  7. Android平台JS打包生成bundle文件:

    react-native bundle --platform android --entry-file index.android.js --reset-cache --bundle-output android/app/src/main/assets/index.android.bundle --dev false --assets-dest android/app/src/main/res/

    (1)--entry 入口js文件,android系统就是index.android.js,ios系统就是index.ios.js
    (2)--bundle-output 生成的bundle文件路径
    (3)--platform 平台
    (4)--assets-dest 图片资源的输出目录
    (5)--dev 是否为开发版本,打正式版的安装包时我们将其赋值为false

  8. Debug模式链接:

    http://localhost:8081/debugger-ui

推荐一款ReactNative插件,无需输入各种命令行
github.com/smuyyh/Reac…

Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry registry.npm.taobao.org --global
yarn config set disturl npm.taobao.org/dist --global

如果你遇到EACCES: permission denied权限错误,可以尝试运行下面的命令(限linux系统): sudo npm install -g yarn react-native-cli.

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用yarn代替npm操作。