React native 项目入门(知乎日报，豆瓣电影，[one]一个)

更新：
目前增加了豆瓣电影和[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，扩展很方便，同时使用也非常简单。
基本使用步骤：

1. 注册
   首先需要在App入口处对每个scene进行注册，scene类似于android中的Activity。

其中key是required，key是scene的唯一标识，在进行界面跳转时使用Action.key即可完成跳转。一般来说component也是必须设置的，是跳转后的界面渲染。
当scene设置initial={true}时，为app的第一个界面

2. 界面操作

• 跳转

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 / >
        } > 
    )
  }
})

---

项目实战

1. scene注册

 render() {
        return (
            
                
                    
                        
                        
                    
                
            

        )
    }

2. 抽屉式菜单

return (
       Actions.refresh({ key: state.key, open: true })}
        onClose={() => Actions.refresh({ key: state.key, open: false })}
        content={}
        tapToClose
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        negotiatePan
        tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio) },
        })}
      >
        
      
    );

3. 数据列表页
   数据列表页使用ListView来展示日报的简明数据

                
                    }
                    style={styles.listview}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData, sectionID, rowID)=>
                        
                    }
                />
            

在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,
                });
            }
        })
    }

4. 详情页展示
   这里需要注意的是，日报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 (
          
              
              
          
      )
  }

源码地址

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 【一个】客户端）