知乎日报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