【React-native】结合 NativeBase & FlatList 的 api 数据设计及使用

首先，官方地址：https://docs.nativebase.io/Components.html#card-image-headref

---

效果展示，这里使用的是Card image（PS：这里用了才看的阿丽塔战斗天使，哇咔咔，好看）：

---

 版本：

"native-base": "^2.6.1",
"react": "^16.2.0",
"react-native": "^0.53.0",
"react-native-gesture-handler": "^1.0.9",

这里的版本兼容一定要注意，因为RN的坑之一就是某些组件高版本并不兼容低版本。

---

核心组件：

/**
 * Created by supervons on 2019/2/25.
 */
/**
 * Created by supervons on 2019/2/25.\
 * 新闻列表页面，Card Image 列表展示形式
 */
import React, {Component} from 'react';
import {Image} from 'react-native';
import {
    Card,
    CardItem,
    Thumbnail,
    Text,
    Button,
    Icon,
    Left,
    Body,
    Right,
} from 'native-base';
export default class NewsItem extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            
                
                    
                        
                        
                        {this.props.newsTitle}
                        {this.props.newsIntroduction}
                        
                    
                
                
                    
                
                
                    
                        
                            
                            {this.props.newsFavoriteId} 喜欢
                        
                    
                    
                    
                        
                        {this.props.commentsCount} 评论
                    
                    
                    
                        {this.props.newsTime}
                    
                
            
        );
    }
}

---

 组件调用：

    returnRender(item){
        return(
            
        );
    }
     this._onRefresh()}
             data={this.state.newsList}
             renderItem={({item}) => this.returnRender(item)}
    />

 组件封装后，使用 FlatList 这里的 nesList 是网络请求后获取到的数据，格式如下：

 

 这里的图片，我存储的是网络中的图片，可以在接口中写为url地址，然后组件中uri调用，目前待优化。

之后，可以优化对列表进行下拉刷新，上拉加载更多。 

项目地址：https://github.com/supervons/commonProject