版权声明：请通知博主（[email protected]）获取允许后进行分享。 https://blog.csdn.net/qq934235475/article/details/87967030
首先，官方地址：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 (
<Card>
<CardItem>
<Left>
<Thumbnail source={{uri:this.props.newsTitleImage}}/>
<Body>
<Text>{this.props.newsTitle}</Text>
<Text note>{this.props.newsIntroduction}</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image source={{uri:this.props.newsContentImage}}
style={{height: 200, width: null, flex: 1}}/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up"/>
<Text>{this.props.newsFavoriteId} 喜欢</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles"/>
<Text>{this.props.commentsCount} 评论</Text>
</Button>
</Body>
<Right>
<Text>{this.props.newsTime}</Text>
</Right>
</CardItem>
</Card>
);
}
}组件调用：
returnRender(item){
return(
<NewsItem
newsTitle={item.newsTitle}
newsIntroduction={item.newsIntroduction}
newsFavoriteId={item.newsFavoriteId}
commentsCount={item.commentsCount}
newsTime={item.newsTime}
newsContentImage={item.newsContentImage}
newsTitleImage={item.newsTitleImage}/>
);
}
<FlatList
refreshing={this.state.refreshing}
onRefresh={() => this._onRefresh()}
data={this.state.newsList}
renderItem={({item}) => this.returnRender(item)}
/>组件封装后，使用 FlatList 这里的 nesList 是网络请求后获取到的数据，格式如下：
这里的图片，我存储的是网络中的图片，可以在接口中写为url地址，然后组件中uri调用，目前待优化。
之后，可以优化对列表进行下拉刷新，上拉加载更多。