本文主要是介绍ReactNative:0.6从入坑到打包APK到发布@布谷老人语音天气，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近买了一本书,ReactNative开发原生应用,以前都是直接使用Kotlin开发,但是感觉最近一直写JS,不如用JS开发
吧,然后就边看书边开发了,写了一个简单的语音天气APP,基本上该遇到的坑和功能都使用了,tips:应用很小,所以没有使用Redux.
ReactNative和一些套壳的框架相比好多了,编译后是原生的代码,这个就是很有意思了,还能和原生混合开发.
前排提示一个很坑的问题:RN0.6开始拆分了特定平台的组件到公共库里了,比如android的Toolbar,你直接在React-native引入是没用的.需要专门安装,一会会提到.
看看成品吧,会在酷安上架哦,我的酷安ID:IWH暖
本文总的结构如下:
1.安装RN环境并解决一些坑
2.开始编写android应用并使用android特定的组件
3.打包APK,精简体积,签名,发布应用.
1.准备开发环境
安装RN脚手架
yarn global add react-native-cli创建项目
react-native init demo 如果创建项目特别慢,甚至出现网络超时,更换yarn源
yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
启动项目,报错没有命令的,查看自己是否全局安装了.
react-native run-android为了预览与调试,你需要一个模拟器,我这里是直接用的android手机开启USB调试.
使用 ADB devices 看看有没有你的设备.
如果你没有安装android的SDK工具,会报错,你要安装好SDK(如果你用了androidStudio,那么进入demo项目的android目录
项目android/local.properties
追加 sdk.dir = /sdk目录 linux /home/userName/android...
如果你遇到license错误
android 许可错误
进入sdk目录的 Sdk/tools/bin 执行 ./sdkmanager --licenses 同意许可．．．
建议也检查以下你的bash配置,尤其是用ZSH的同学..
nano ~/.bash_profileexport ANDROID_HOME=/home/qiuguo/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/platform-tools/adb如果手机设备出现 服务连接失败,一般都是没启动服务
项目根目录 yarn start 即可,注意默认端口8081不要被其他应用用了.或者你可以摇晃设备弹出调试菜单,手动更改ip与地址,然后
adb reverse tcp:8081 tcp:8081 来自定义
如果你遇到资源文件出错,或者未找到,执行以下命令
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/sr
c/main/assets/index.android.bundle --assets-dest android/app/src/main/res/既然可以预览了,那我们开始编写应用了.
编写前,其实我画了一个简单的原型图
查看原型演示:布谷天气墨刀原型演示
2.开始编写
这里不会讲解React如何编写,只说说RN的东西
看一下初始化的项目的结构:其中Android是RN编译后的原生目录
看到有 APP.js Index.js 这两个是入口文件,其他的和平时一样,自己创建组件目录或者资源目录就行了和web开发一样.
看看index.js这是入口,其中registerComponent()是不是很熟悉,和web开发里面.APP是我们的最外层组件
/*** @format*/import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App);
看看 APP.js
import React from 'react';
//style.js 是一个json格式的css样式
import {APP_STYLE} from './styles';
//导入常用组件
import {SafeAreaView,StyleSheet,ScrollView,Modal,ToastAndroid,View,Animated,TouchableNativeFeedback,Touchable,RefreshControl,TouchableHighlight,Image,Text,NativeEventEmitter,StatusBar,
} from 'react-native';//这里是初始化项目自带的引导组件,你可以删除掉
import {Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';//组件
class App extends React.Component {state = {isSpeaching: false,helpStatus: false,refresh:false,voiceText: '',//是否选择地区isSelect: false,//语音状态voiceHide: true,//天气信息weatherData: {},};........//样式使用stylesrender(){return(//你也可以直接使用行内写法<View style={styles.weatherBox}>)}}
//创建样式表对象
const styles = StyleSheet.create(APP_STYLE);
export default App;APP_STYLE.js 样式表
const APP_STYLE ={weatherBig: {fontSize: 70,marginTop: 30,marginLeft: 30,zIndex: 99}
}1.你应该注意到了,全是驼峰写法,格式是json格式,这里有一个可能会遇到的困惑,就是 层级显示,用两个:Zindex和Elevation在android里面.
其中 elevation优先.这个也是原生Android里面的z方向,会出现阴影,具体css你可以去RN官方文档查看哦,这里提一下默认的布局,你可以使用position为relative和absolute,不可以用fixed,还有就是RN的基础组件,如View这个组件,都是使用Flexbox,但是又有区别,比如,你想让子组件填充父组件,设置父组件 Flex:1 就行了.其他属性比如width支持百分比,记得加引号.
2.样式基本了解后,我们看看如何编写事件
和web有区别的是你需要在以下的组件内部编写按压事件
TouchableNativeFeedbackTouchableTouchableHighlight <TouchableHighlight onPress={this.props.closeHelp}><Text style={{marginTop: 20, color: '#BA1904',fontSize:20}}>关闭说明书</Text></TouchableHighlight>3.引入公共组件,看原型,好像我们用到了一个toolbar组件,如果你在React-native引入,会发现,无法使用,百度一圈,都是从rn包导入,那都是旧的版本,新版本你需要额外安装新的toolbar包
facebook公共组件仓库 这里有额外的所有包,如video,netInfo等,这里演示一个toolbar,如果你的RN是0.6 不需要使用link ,网上说link是旧版的.
yarn add @react-native-community/toolbar-android然后就可以愉快的使用了.
<ToolbarAndroidstyle={{ height: 50, backgroundColor: '#fff', color: '#000',elevation:2}}actions={[{title: '说明书',icon: require('./res/images/help2.png'),show: 'always',showWithText: true,},{title: '关于', icon: require('./icon.png'), show: 'never'}]}onActionSelected={this.onActionSelected.bind(this)}><Image source={require('./icon.png')} style={{width: 40, height: 30}}/><Text>布谷天气语音版</Text></ToolbarAndroid>4. 使用Gif与图片资源
上面的代码里会发现用的 require().这里提一下一个坑,RN不支持路径使用动态拼接,也就是说你没有办法使用变量拼接!
然后我们处理GIF的问题
进入android/app/目录 找到 gradle文件 在dependencis 添加依赖
implementation 'com.facebook.fresco:animated-gif:2.0.0'一些小伙伴发现图片不动,升级你的依赖,网上很多都是旧的..
5.使用权限管理
android有一些权限是需要申请使用的,fb也提供了在上面的公共库里哦,用法,这里不说了,提一句就是,没开发过Android的小伙伴经常会忘记在manifest文件声明权限!
6.使用存储
如果你用AsyncStorage 会遇到警告,因为它也被剥离出来了,你需要专门安装哦
这里是一个封装片段
async setData(key,value){try{await AsyncStorage.setItem(key,value);console.log('保存数据成功.')return true;}catch (e) {console.log('保存错误:' + e)return false;}},7.使用网络
RN使用默认支持Fetch,你也可以用axios,不过很遗憾jQuery不可以,因为它有涉及DOM的功能...
注意RN不存在跨域的,你可以看看postman就知道了.
8.动画 等有空再写.
3.打包
下面说说最重要的一项,打包APK出来,因为主要是说说遇到的错误,至于如何生成你的开发者秘钥,请自行百度哦,因为我以前用AndroidStudio开发应用,所以有一个jks的文件,如果你用的命令行创建会有好几个文件.
配置你的秘钥,进入android/app/gradle.properties 设置几个变量,一会要用到的.jks文件也是在同级目录
android.useAndroidX=true
android.enableJetifier=true
MYAPP_RELEASE_STORE_FILE=xxx.jks
MYAPP_RELEASE_KEY_ALIAS=xx
MYAPP_RELEASE_STORE_PASSWORD=xx
MYAPP_RELEASE_KEY_PASSWORD=xxx然后修改构建文件
android/app/build.gradle
找到这个块,替换
signingConfigs {release {storeFile file(MYAPP_RELEASE_STORE_FILE)storePassword MYAPP_RELEASE_STORE_PASSWORDkeyAlias MYAPP_RELEASE_KEY_ALIASkeyPassword MYAPP_RELEASE_KEY_PASSWORD}}然后进入android根目录
执行./gradlew assembleRelease
Rn打包的时候,会经常遇到以下错误,资源文件重复,部分依赖包出错(比如本应用使用的讯飞语音SDK,由于gradle不兼容,总是报错),正常来说,打包后,资源文件重复,要么是你的资源文件重名了,要么就是你打包之前,没有clean build后的项目.
资源文件重复后,如果你执行了clean也是一样,手动把app/build/genera... 删除
进入 android目录执行 ./gradlew clean 清理项目,再次 ./gradlew assembleRelease 构建APK
当你打包后,你会发现,安装包非常大,不到1000行的代码有30M,因为RN默认打包了全平台版本,你可以自己选择是否支持其他平台
我们修改一下 gradle文件 我只保留了arm架构版本,不过也生成一个通用的安装包,单独版本的大小现在是10M左右
def enableSeparateBuildPerCPUArchitecture = true
...splits {abi {reset()enable enableSeparateBuildPerCPUArchitectureuniversalApk true // If true, also generate a universal APKinclude "armeabi-v7a","arm64-v8a"}}
...universalApk true最后最重要的提示就是:一定要看清楚自己的RM版本,构建APK失败,先Clean一下,如果是第三方SDK可以去看看依赖包的gradle...
...等待更新
公众号:秋果科技工作室
酷安ID:IWH暖 来玩啊
这篇关于ReactNative:0.6从入坑到打包APK到发布@布谷老人语音天气的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
