更新：
目前增加了豆瓣电影和[one]一个功能模块，具体可参考效果图，其中[one]一个的api可参考One API分析。
React Native 进阶请戳：React native 项目进阶(redux, redux saga, redux logger)
React Native 项目2（One 【一个】客户端）
趁着中秋假期无事，使用react native做了一个练手项目。首先看下效果图：
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
这里重点说一下用到的api和一些第三方库。这里贴一下代码的地址react-native-simple-zhihu.
知乎日报api
已经有大神对知乎日报的api进行了分析，很详细知乎日报api.
之前练习android项目的时候也用到了，表示非常感谢。
lib
这里主要使用了react-native-drawer，react-native-router-flux。
react-native-router-flux
react-native-router-flux是一个界面导航库，目前已经实现了redux，扩展很方便，同时使用也非常简单。
基本使用步骤：
- 注册
首先需要在App入口处对每个scene进行注册，scene类似于android中的Activity。
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
其中key是required，key是scene的唯一标识，在进行界面跳转时使用Action.key即可完成跳转。一般来说component也是必须设置的，是跳转后的界面渲染。
当scene设置initial={true}时，为app的第一个界面
- 界面操作
- 跳转
Actions.Scene_Key(params)
在界面跳转时，可以传递一些参数，类似于Android中的intent。
- 退出
Actions.pop()
或者直接按返回键，这里返回键是被监听到的。
- 强制重现渲染
Action.refresh(params)
react-native-drawer
这是使用react实现的抽屉式菜单，与android中的抽屉式菜单很类似。
部分属性说明
captureGestures true时可以截获手势操作
acceptDoubleTab true 双击打开或关闭drawer
acceptTab true 打击打开或者关闭drawer，响应区域受到panOpenMask, panCloseMask限制
negotiaPan true 只接受横向手势操作，配合scrollview使用
panthreshold 打开drawer必须滑动的宽度比例
panOpenMask 打开drawer的可操作区域 从左向右计算比例
panCloseMask 关闭drawer的可操作区域，从右向左计算比例
initializationOpen 定义初始化时打开还是关闭
side drawer的位置:left or right
以下是文档中的示例：
import Drawer from 'react-native-drawer'
class Application extends Component {
closeControlPanel = () = >{
this._drawer.close()
};
openControlPanel = () = >{
this._drawer.open()
};
render() {
return ( < Drawer ref = { (ref) = >this._drawer = ref
}
content = { < ControlPanel / >
} > <MainView / ></Drawer>
)
}
})
项目实战
- scene注册
render() {
return (
<Router>
<Scene key="tabbar" component={Drawer}>
<Scene
key="main"
tabs
tabBarStyle={styles.tabBarStyle}
tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
<Scene key="ZhiHuPage" component={ZhiHuPage} title="知乎日报" initial icon={TabIcon}/>
<Scene key='StoryDetail' component={StoryDetailPage} hideNavBar={false}
navigationBarStyle={styles.playerTab}/>
</Scene>
</Scene>
</Router>
)
}
- 抽屉式菜单
return (
<Drawer
ref="navigation"
type="displace"
onOpen={() => Actions.refresh({ key: state.key, open: true })}
onClose={() => Actions.refresh({ key: state.key, open: false })}
content={<TabView />}
tapToClose
openDrawerOffset={0.2}
panCloseMask={0.2}
negotiatePan
tweenHandler={(ratio) => ({
main: { opacity: Math.max(0.54, 1 - ratio) },
})}
>
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
</Drawer>
);
- 数据列表页
数据列表页使用ListView来展示日报的简明数据
<View style={{flex: 1}}>
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.fetchDaily.bind(this)}
/>
}
style={styles.listview}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID)=>
<StoryCell
story={rowData}
/>
}
/>
</View>
在Storycell中定义每个cell的界面。
- 数据请求
使用fetch进行数据请求
fetchDaily() {
this.state.date = STORE.date;
var url = "http://news.at.zhihu.com/api/4/news/before/" + STORE.date;
fetch(url)
.then((response)=>response.json())
.then((jsonResponse) => {
if (jsonResponse["stories"]) {
var stories = jsonResponse["stories"];
this.setState({
db: stories,
dataSource: this.state.dataSource.cloneWithRows(stories),
loaded: true,
})
}
}).catch((error) => {
if (error instanceof SyntaxError) {
this.setState({
db: [],
loaded: true,
});
}
})
}
- 详情页展示
这里需要注意的是，日报api返回的是json数据，给出了相应的图片地址，html格式的data，share-url等数据，我们这里直接使用Webview加载起share-url指向的地址。
- 获取json数据
fetchDaily() {
var url = "http://news-at.zhihu.com/api/4/news/" + this.props.id;
fetch(url)
.then((response)=>response.json())
.then((jsonResponse) => {
if (jsonResponse["share_url"]) {
var shareUrl = jsonResponse["share_url"];
this.setState({
detailUrl: shareUrl
})
}
}).catch((error) => {
if (error instanceof SyntaxError) {
this.setState({});
}
})
}
- Webview渲染
render() {
return (
<View style={{flex: 1}}>
<WebView style={styles.webview_style}
url={this.state.detailUrl}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
>
</WebView>
</View>
)
}
源码地址
react-native-zhihu
https://github.com/wutongke/react-native-zhihu
欢迎关注公众号wutongke，每天推送移动开发前沿技术文章：
wutongke
推荐阅读：
React-native项目入门与思考
React native 项目入门(知乎日报，豆瓣电影，[one]一个)
React native 项目进阶(redux, redux saga, redux logger)
React Native 项目2（One 【一个】客户端）
网友评论