react native

环境准备

前提是需要node和npm,这里不在赘述.介绍一个npm加速的.

使用淘宝的npm镜像.控制台运行,或者加入你的bashrc中永久生效

alias cnpm="npm --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc";

安装开发必备的一些package

cnpm install -g react-native-cli webpack

react-native也调用了npm命令,所以我们可以再来个alias加速react-native init

alias npm='cnpm'

或者直接将仓库改为淘宝的NPM镜像

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

在mac上还需要一些东西

brew install flow watchman

安装完以后可以开始helloworld了.

开始第一个例子

cd /data/tmp
react-native init HelloWorld

然后正在初始化大致如下

This will walk you through creating a new React Native project in /data/tmp/HelloWorld
Installing react-native package from npm...
Setting up new React Native app in /data/tmp/HelloWorld
HelloWorld@0.0.1 /data/tmp/HelloWorld
└── react@15.2.1

To run your app on iOS:
   cd /data/tmp/HelloWorld
   react-native run-ios
   - or -
   Open /data/tmp/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /data/tmp/HelloWorld
   react-native run-android

使用React类名(组件名)必须首字母大写才会被认为是一个组件,否则在JSX里只会当做普通标签

下面是一些针对开发IOS的教程

我们执行react-native run-ios开始编译运行,前提是你必须安装了xcode哦.

执行后,出现BUILD SUCCEEDED,同时自动打开新的终端运行了一个server在8081端口.

模拟器中也会出现刚编译好的app的窗口,使用cmd+r刷新,cmd+d弹出开发菜单.

我们可以修改index.ios.js开始开发了.

下面是一些针对开发Android的教程

问题

在使用fetch调用接口时,可能会出现The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.错误

这是IOS9要求必须使用https通信,需要修改 http://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9

其实react native创建Info.plist时就已经为我们说明了,在NSExceptionDomains下面的dict里添加一个排除域名就OK了.

注意,不能将默认的localhost去掉,否则会出现_fbBatchedBridge is undefined错误.

打包

对android项目打包

使用keytool生成签名文件,在任意目录下执行

keytool -genkey -v -keystore my-release-key.keystore  -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

上面my-release-key可以自己定义,后面的my-key-alias也可以自己定义.运行后输入一下相关信息后,生成my-release-key.keystore文件.

其中输入的两次密码,需要记住.将这个文件移动到android/app目录下,编译android/app里的build.gradle,添加下面的内容

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            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
        }
    }
}

在android目录下运行如下命令,就可以打包,安装到自己手机上,前提是手机已usb调试连接到电脑

./gradlew assembleRelease
cd app/build/outputs/apk
adb install -r app-release.apk

参考 https://facebook.github.io/react-native/docs/signed-apk-android.html