神刀安全网

React native 项目入门

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

React native 项目入门
1

React native 项目入门
2

React native 项目入门
3

这里重点说一下用到的api和一些第三方库。这里贴一些代码的地址react-native-simple-zhihu.

知乎日报api

已经有大神对知乎日报的api进行了分析,很详细知乎日报api.
之前练习android项目的时候也用到了,表示非常感谢。

lib

这里主要使用了react-native-drawerreact-native-router-flux

react-native-router-flux

react-native-router-flux是一个界面导航库,目前已经实现了redux,扩张很方便,同时使用也非常简单。
基本使用步骤:

  1. 注册
    首先需要在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的第一个界面

  2. 界面操作
  3. 跳转

    Actions.Scene_Key(params)

在界面跳转时,可以传递一些参数,类似于Android中的intent。

  • 退出

    Actions.pop()

或者直接按返回键,这里返回键是被监听到的。

  • 强制重现渲染

    Action.refresh(params)

react-native-drawer

这是使用react实现的抽屉式菜单,与android中的抽屉式菜单很类似。
以下是文档中的示例:

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

项目实战

  1. 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>       )  }
  2. 抽屉式菜单
    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>  );
  3. 数据列表页
    数据列表页使用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的界面。

  4. 数据请求
    使用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,               });           }       })   }
  5. 详情页展示
    这里需要注意的是,日报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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React native 项目入门

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址