用React-Native技术实现一个简单的微博客户端。项目开源地址:github。项目还在持续更新中😊。
开发环境:macOS
部分效果:
安装
首先安装node和watchman。
|
|
然后安装react native cli。
|
|
安装Android开发环境就不再赘述。
创建项目、运行项目。
|
|
这样可以直接将应用在手机上运行起来,并且可以通过晃动手机(😓)来唤出命令界面,进行动态的更新js实现的功能。但是这样的运行的应用性能并不高,仅仅适用于调试,所以还是需要打包进行发布。
打包发布
生成签名密钥。
|
|
添加签名文件到android/app/build.gradle
:
|
|
混淆压缩apk。在android/app/build.gradle
文件中,修改:
|
|
打包和安装。
引入微博api
进入微博开发平台,申请一个开发者账号,创建一个移动应用,关键是得到一个app key。然后研究weibo提供的android sdk文档。
这里需要特别注意的是,要想成功使用微博的api,你首先要在微博开发平台>应用信息>测试信息中填写你的测试账号,否则无法登陆。同时,将你的开发的app安装到手机上,用微博提供的app_signatures.apk
获得该应用的Android签名,然后填写到微博开发平台>应用信息>基本信息中的Android包名:com.welone
和Android签名:xxxx你获得的签名xxxxxxx
。完成以上两个步骤才能正常使用微博的api,呵呵。
下面需要通过gradle引入微博的api,官网最近版本已经提供了gradle的引入方式,但是移除了open api的功能。因为我是用的是旧的版本,并且使用了open api,所以引入了一个其他开发者提供的微博api仓库。在android/app/build.gradle
中修改如下:
|
|
在构建的时候会自动的下载该库进行编译。
让你的UI更好看
使用react-native提供的component比较朴素,当然自己可以通过调制创建出漂亮的组建。这里,有NativeBase已经帮我们创建好了,官网提供了很详细的安装教程,这里先安装好,我们将来要使用。其中react-native-vector-icons
组件需要特殊的配置一下。
这里主要介绍了开始编写一个react-native的微博客户端的准备工作,下面一章将会详细介绍。