React-Native 知乎日报首页

待我称王封你为后i 2022-08-19 01:51 238阅读 0赞

主要练习从服务器获取数据,然后展示到界面,最外层用ScrollView包裹起来顶部是一个ViewPager,api使用的知乎日报的api,在这里只使用了一个[主题日报列表查看][Link 1]的api,获取到json数据之后,显示到ListView中.最终效果如下:

![zhihu][]

### 获取网络数据 ###

根据前面的文章[React-Native 网络请求][React-Native]使用fetch方法来获取

_getData:function(){
      var datas = [];
      fetch('http://news-at.zhihu.com/api/4/themes')
      .then((response) => response.text())
      .then((responseText) => {
        var  jsonObject = eval("(" + responseText + ")");
        var array = jsonObject.others;
        for(var i=0; i<array.length; i++ ){
          datas.push(array[i]);
        }
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(datas),
          isLoading: false
        });
      })
      .catch((error) => {
        console.warn(error);
      }).done;
      return datas;
    },

上面的代码是从服务器获取的json数据, 使用 **eval** 方法将json字符串转为 javascript对象, 注意json字符串需要用 **括号()** 包裹起来,然后给listviwe设置数据

this.setState({
      dataSource: this.state.dataSource.cloneWithRows(datas),
      isLoading: false
    });

### ListView用来展示 ###

代码比较简单,结合前面学习的很容易理解

<ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) =>
              <TouchableOpacity>
                  <View style={
        { flexDirection:'row' }}>
                    <Image source={
        { uri: rowData.thumbnail }} style={
        {
        height:60,width:80, margin:12,}} />
                    <View>
                      <Text style={
        { marginTop:12, color:'#234', fontSize:16,}}>{rowData.name}</Text>
                      <Text style={
        { marginTop:12, color:'#888', fontSize:12,}}>{rowData.description}</Text>
                      <View style={
        {
        height:1.5,  backgroundColor:'#222' }}></View>
                    </View>
                  </View>
                </TouchableOpacity>
                }
    />

完整代码:

'use strict'
    
    var React = require('react-native');
    
    var {
      AppRegistry,
      StyleSheet,
      View,
      Text,
      TouchableOpacity,
      Navigator,
      ScrollView,
      ViewPager,
      BackAndroid,
      ViewPagerAndroid,
      Image,
      ListView,
    } = React;
    
    
    
    BackAndroid.addEventListener('hardwareBackPress', function() {
      if(_navigator == null){
        return false;
      }
      if(_navigator.getCurrentRoutes().length === 1){
        return false;
      }
      _navigator.pop();
      return true;
    });
    
    var _navigator ;
    var PAGES = 5;
    var imageUrls = [
      'https://img.alicdn.com/bao/uploaded/i3/TB1vkdZKFXXXXaAXVXXXXXXXXXX_!!0-item_pic.jpg',
      'https://img.alicdn.com/bao/uploaded/i5/TB1CGo3KXXXXXb6XpXXYXGcGpXX_M2.SS2',
      'https://img.alicdn.com/bao/uploaded/i1/TB1jkifKVXXXXXhXXXXXXXXXXXX_!!0-item_pic.jpg',
      'https://img.alicdn.com/bao/uploaded/i2/TB1GCgoKVXXXXcaXpXXXXXXXXXX_!!0-item_pic.jpg',
      'https://img.alicdn.com/bao/uploaded/i1/TB1D6A7KVXXXXaQXVXXXXXXXXXX_!!0-item_pic.jpg',
    ]
    var NewsView = React.createClass({
    
      getInitialState: function(){
        _navigator = this.props.navigator;
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(this._getData()),
        };
      },
      _getData:function(){
        var datas = [];
        fetch('http://news-at.zhihu.com/api/4/themes')
        .then((response) => response.text())
        .then((responseText) => {
          var  jsonObject = eval("(" + responseText + ")");
          var array = jsonObject.others;
          for(var i=0; i<array.length; i++ ){
            datas.push(array[i]);
          }
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(datas),
            isLoading: false
          });
        })
        .catch((error) => {
          console.warn(error);
        }).done;
        return datas;
      },
    
      render:function(){
        var pages = [];
        for (var i = 0; i < PAGES; i++) {
          pages.push(
            <View key={i} style={
         { flex: 1, alignItems: 'stretch' }} collapsable={
         false}>
              <Image
                style={
         { flex:1 }}
                source={
         {uri: imageUrls[i%PAGES] }}
              />
           </View>
          );
        }
        return (
          <ScrollView>
            <View>
              <ViewPagerAndroid
                style={styles.viewPager}
                initialPage={
         0}
                onPageScroll={
         this.onPageScroll}
                onPageSelected={
         this.onPageSelected}
                ref={viewPager => { this.viewPager = viewPager; }}>
                {pages}
              </ViewPagerAndroid>
              <ListView
                dataSource={
         this.state.dataSource}
                renderRow={(rowData) =>
                        <TouchableOpacity>
                            <View style={
         { flexDirection:'row' }}>
                              <Image source={
         { uri: rowData.thumbnail }} style={
         {height:60,width:80, margin:12,}} />
                              <View>
                                <Text style={
         { marginTop:12, color:'#234', fontSize:16,}}>{rowData.name}</Text>
                                <Text style={
         { marginTop:12, color:'#888', fontSize:12,}}>{rowData.description}</Text>
                                <View style={
         {height:1.5,  backgroundColor:'#222' }}></View>
                              </View>
                            </View>
                          </TouchableOpacity>
                          }
              />
            </View>
          </ScrollView>
        );
      },
    });
    var styles = StyleSheet.create({
      viewPager:{
        height : 200,
      },
    });
    
    module.exports = NewsView;

[github地址][github]

> 文章来自: [http://hanks.xyz][http_hanks.xyz]

[Link 1]: http://news-at.zhihu.com/api/4/themes
[zhihu]: http://file.bmob.cn/M02/2B/29/oYYBAFaDpFCAC55oAEUmvcxK3O0625.gif
[React-Native]: http://hanks.xyz/2015/12/23/react-network/
[github]: https://github.com/hanks-zyh/Hrn
[http_hanks.xyz]: http://hanks.xyz