环境搭建
http://reactnative.cn/docs/0.50/getting-started.html (react-native官网)
1. 安装JDK
- 从Java官网下载JDK并安装 (安装成功后CMD打开命令行输入
java -version检查是否安装成功) - 环境变量配置
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
JAVA_HOME
CLASSPATH
2. 安装Android SDK
-
官网链接AndroidDevTools
-
安装完成后在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
-
在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。==（必须是这个版本）==
-
配置ANDROID_HOME环境变量
3. 安装NodeJS
- 从官网下载node.js
- 可使用node -v的命令来测试NodeJS是否安装成功
4. 安装git
- git下载地址
- 在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中。
5.安装Python
从官网下载并安装python 2.7.x（3.x版本不行）
6.测试安装
react-native init AwesomeProject (初始化一个react-native的项目,这个名字要慎重,影响到之后再小米应用商店的发布)
cd AwesomeProject
react-native run-android
项目结构
- Android app项目在 coding 8lab_devApp项目下的android分支
- Index.android.js是文件入口
- static里面放的是项目中用到的图片
- src目录下是项目的js代码
- custom/pxToDp.js 是将ui给出设计图的px像素转换成手机设备的dp设配各种手机
- component/url.js 是各个请求都已经给出注释
React-native的样式
我们在web开发中 使用的是css来写样式,在react-native中直接写在js文件就可以了,
React-native 默认使用flex布局, 并且flex-direction 默认为column
- 可以把样式写在行内 <Text style={{ color: '#212121', marginLeft: 8 }}>
- 使用StyleSheet.create来集中定义组件的样式,然后就可以多次引用了
- 你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
- 语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。
路由控制
官方推荐 React-navigation来控制路由 https://reactnavigation.org/
-
Android 默认的跳转方式很别扭 让安卓实现类似iOS的push动画
- 2 跳转页面
navigate('Detail',{
title:'图片详情',
url:item.url,
});
在StackNavigator中注册的页面，需要一一对应，才能跳转到相应的页面
在跳转的页面可以通过this.props.navigation.state.params.title获取到这个参数。当然这个参数可以随便填写，都可以通过this.props.navigation.state.params.xxx获取。
- 3 清除跳转记录
使用reset方法,现在跳转到Login页面,并清除之前所有的记录
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Login' }),
]
})
this.props.navigation.dispatch(resetAction)
开发调试
- 实时刷新
打开摸机器后 win+M 键可以调出这个界面, 点击Enable Hot Reloading 就可以实时的看到你修改完代码的内容 - 调试信息
可以选择在Js代码中 alert(‘test’)来查看调试信息
也可以去谷歌商店下载 React Developer Tools ,然后在模拟器里 win+M后点击 Debug Js Remotely,之后会自动打开谷歌浏览器, F12后就可以看到console.log()信息了
打包发布
1, 产生签名的key
该过程会用到keytool，开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具
在项目的主目录中执行：
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然后就会出现下图
没啥说的只想告诉大家最后一步,一定要输入个是~
现在自己看你的项目跟目录发现多了一个
my-release-key.keystore文件
[注：在产生的时候需要提供密钥和存储密码，后续会用到]
2, 设置gradle变量
1.把my-release-key.keystore文件放到你工程中的android/app文件夹下。
2.编辑 android/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=xx
MYAPP_RELEASE_KEY_PASSWORD=xx
** [注意替换xx为你自己设置的密钥和存储密码]**
关于密钥库的注意事项:
一旦你在Play Store发布了你的应用，如果想修改签名，就必须用一个不同的包名来重新发布你的应用（这样也会丢失所有的下载数和评分）。所以请务必备份好你的密钥库和密码。
3, 添加签名到项目的gradle配置文件
编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file("my-release-key.keystore文件的绝对路径")
storePassword "密钥密码"
keyAlias "my-key-alias"
keyPassword "存储密码"
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
4,生成发行APK包
$ cd android && ./gradlew assembleRelease
然后就可以在下图目录中找到apk文件了
apk
==注意每次打包新的apk时候要删除之前的!!!==
网友评论