环境准备
前提是需要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
No comments:
Post a Comment