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

2016-09-17 本文已影响8122人 wutongke

更新：
目前增加了豆瓣电影和[one]一个功能模块，具体可参考效果图，其中[one]一个的api可参考One API分析。
React Native 进阶请戳：React native 项目进阶(redux, redux saga, redux logger)
React Native 项目2（One 【一个】客户端）

趁着中秋假期无事，使用react native做了一个练手项目。首先看下效果图：

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，扩展很方便，同时使用也非常简单。
基本使用步骤：

<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