用React-Native技术实现一个简单的微博客户端。项目开源地址:github。项目还在持续更新中😊。
主界面设计
进入应用,首先看到的就是主界面,这里采用了经典的底部3个tab的主界面设计风格,如下所示。
react-native 框架已经为我们生成了一个简单的主界面于index.android.js
,代码如下:
|
|
这里我们所要做的就是将render()函数中的内容替换成我们的componet。这里我新建了一个MainTab组建,并且将它放置于./app/comp/MainTab.android.js
中,android后缀表明编译android应用时选择该js文件作为编译对象,这样你也可以实现MainTab.ios.js,从而可以针对不同的系统采用不同的设计内容。这里我新建了一个app目录用来存放组件相关的代码和资源,我的文件组织目录如下图所示。
修改后的index.android.js
如下:
|
|
先忽略Navigator组件在这里的作用,这里可以先理解为以MainTab作为当前的视图的根view:
|
|
在app/comp/MainTab.android.js
里,我采用了同样经典的三段式配合3个tab来使用。
|
|
其中Container、Header、Content、Footer等组件皆来自于Native-Base。我的建议是能用原始的react-native的组建就用原始的,Native-Base提供的组件虽然美观,但是缺少了定制的灵活性。
当点击tab时,调用回调函数onPressTab()
触发view的变化。根据传入的参数确定用户点击的哪一个tab,然后修改当前的状态。注意,这里涉及修改当前组件状态的操作this.setState({ activeTab: tab })
,所以回调函数采用<Button onPress={() => this.onPressTab(TAB_SET)}>
,这里是用箭头函数指明了该函数运行的上下文位于该组件中。在不涉及修改state时并无大碍,如果涉及修改state,一定要采用异步操作。记住千万不要在render
函数中直接修改state。
|
|
内容显示
在MainTab组件中,显示内容的部分需要根据用户的选择依次显示“关注”、“消息”和“设置”三个板块,为此我设计了一个WeiboList
组件来显示具体内容,并且作为Content的子组件镶嵌进MainTab。
|
|
这里为WeiboList组件添加了属性tab
,描述当前用户选择的tab类型。同时,为MainTab保留了一个weibolist的应用,为的是从MainTab组件中调用WeiboList的函数,当然这种设计方式不算优美,将来我会用其它方式进行改进。
在WeiboList组件中,实现render()函数如下:
|
|
根据用户选择的板块,返回不同的组件内容。这里主要介绍一下微博内容列表的实现,关于微博登录认证的模块,可以参考源代码。
为了显示列表结构的微博内容,使用了react-native自带的ListView
组件,ListView可以滚动的现实View子组件列表。它需要设置两个重要属性,dataSource
表示数据数组,renderRow
则会将数组中的每一项取出来,渲染一个子组件。这里我设计了WeiboCard
来显示微博的具体内容。
dataSourece的数据源来自this.state.loveSource
,该状态在WeiboList中进行初始化。
|
|
到此为止,视图已经设计完毕,但是还没有数据。接下来需要完成获取数据的部分。
数据获取
这里采用的微博api的Android版本,是一个java库,幸运的是react-native提供了接口让我们开发原生模块在js中调用。当然,也可以研究一下是否可以直接调用微博的js库。
先看一下微博api中提供了什么样的接口供开发者调用。在com/sina/weibo/sdk/openapi/StatusesAPI.java
中,提供了一些与获取微博内容有关的函数,并且提供了详细的文档说明,这里需要使用的就是如下接口。
|
|
在Android项目文件夹下添加了微博模块:android/app/src/main/java/com/welone/weibo/WeiboModule.java
。实现了如下函数:
|
|
其中@ReactMethod
标签指明该函数为一个react-native函数,将会暴露在js部分使用。设计好函数接口,需要讲模块添加到应用包里面。
在android/app/src/main/java/com/welone/weibo/WeiboPackage.java中,
创建一个ReactPackage:
|
|
从上面代码可以看出,react-native不仅可以定制功能模块,还可以定制原生view给js使用。
在android/app/src/main/java/com/welone/MainApplication.java下添加ReactPackage:
|
|
写好原生部分的模块,接下来考虑如何在js部分进行使用。首先创建文件app/comp/module/WeiboModule.android.js,将定义的模块引入并且暴露。
|
|
在WeiboList模块调用getTimeline函数:
|
|
实现getTimeLine函数后可以在适当的地方调用,获取微博内容。
到此为止,实现了应用获取微博内容,并且进行显示的功能。其它功能,比如获取评论等,实现过程类似。