如果感觉我写的不错，关注我，给个star哦！项目地址
如果遇到什么问题可以在评论区回复，或者加QQ群397885169讨论
前言
经过前两篇文章的积累，已经大体上将项目结构完成了，接下来就是对内容的填充，自定义啦。今天就来说一下项目中Cell的规划。
使用React-Native写百思不得姐(一)
使用React-Native写百思不得姐(二)
运行效果图.png
自定义Cell
上回说到要自定义Cell，但具体该怎么定义，如何定义却没有说明，接下来我会说明一下我是如何定义的。
段子Cell.png
图片Cell.png
视频Cell.png
拆分
通过上面三张图，可以明显发现整个Cell是分为三部分的。
Cell头部�自定义.png
Cell内容自定义.png
Cell底部自定义.png
我们将一个Cell分开，分拆成头部，中间，底部。我们逐个完成。
顶部Cell自定义
Cell头部�自定义.png
通过图片会发现左边是一个图片，右边是两端文字。
listItem.js
// Cell顶部布局
userInfo(){
return(
<View style={styles.userInfoStyle}>
<Image source={{uri:this.props.itemData.profile_image}} style={styles.iconStyle}/>
<View style={styles.userDetailStyle}>
<Text style={styles.userTextStyle}>{this.props.itemData.name}</Text>
<Text style={styles.userTimeStyle}>{this.props.itemData.passtime}</Text>
</View>
</View>
)
}
Cell底部布局
Cell底部自定义.png
仔细看一下会发现是4个按钮，每个按钮都左边是一个图片，右边是文字，每个按钮之间还有个分界线。
// Cell底部布局
bottomInfo(){
return(
<View style={styles.bottomStyle}>
{this.createBtn()}
</View>
)
}
// 创建Button
createBtn(){
let btnArr = [];
for(let i = 0 ; i < this.state.btnData.length ; i ++){
let btnData = this.state.btnData;
btnArr.push(
<TouchableOpacity key={i} onPress={()=>{this.btnPress(i)}} activeOpacity={1}>
<View style={styles.btnStyle}>
{
btnData[i].selected ?
<Icon name={btnData[i].icon} size={20} color='red'/>
:
<Icon name={btnData[i].icon} size={20} color='orange'/>
}
<Text style={styles.btnTextStyle}>{btnData[i].title}</Text>
<View style={styles.btnLineStyle} />
</View>
</TouchableOpacity>
);
}
return btnArr;
}
Cell中间布局
接下来就是最重要的Cell中间的布局了
Cell内容自定义.png
Cell中间布局.png
上面两张图的共同点就是顶部都有一段文字，而下面可能是图片，视频，声音或者什么都没有。所以我们要将这里再细分一下。分为视频，图片，声音，段子。
// 图片
if (this.props.itemData.type == '10'){
return(
<PictureItem pictureData={this.props.itemData}
picturePress={this.props.picturePress}
satinPress={this.props.satinPress}
/>
)
}
// 段子
if (this.props.itemData.type == '29'){
return(
<SatinItem satinData={this.props.itemData.text}
satinPress={this.props.satinPress}
/>
)
}
// 声音
if (this.props.itemData.type == '31'){
return(
<View>
<Text>{this.props.itemData.text}</Text>
</View>
)
}
// 视频
if (this.props.itemData.type == '41'){
return(
<View>
<VideoItem videoData={this.props.itemData}/>
</View>
)
}
段子
通过上面的找规律发现，基本每个Cell都是有一段话的，可能是段子也可能是别的。但它们都是通过同一个接口获取的，所以我们将它们归于一类。
// 段子
class SatinItem extends Component{
static defaultProps = {
satinData: React.PropTypes.string,
satinPress:null,
};
render(){
return(
<TouchableOpacity activeOpacity={0.8} onPress={this.props.satinPress}>
<View style={styles.satinViewStyle}>
<Text style={styles.satinStyle}>
{this.props.satinData}
</Text>
</View>
</TouchableOpacity>
)
}
}
通过上面的代码，将段子的数据源和点击事件就设置好了。在之后的项目中会有很多地方用到段子的点击事件。
图片
在百思不得姐中图片有三种，普通配图，gif图，长图，对于普通配图只要设置好图片的宽高就好了；对于gif图，iOS端也是只要设置好宽高就可以了，但对于安卓平台需要引用一些其他的东西；而对于长图就要进行判断了，根据判断来展示需要的图片。
// 图片
class PictureItem extends Component{
static defaultProps = {
pictureData: React.PropTypes.string,
picturePress: null,
satinPress: null,
};
constructor(props){
super(props);
let imageHeight = (width - 20) * this.props.pictureData.height / this.props.pictureData.width;
this.state={
imageHeight:imageHeight
};
// console.log('屏幕高度' + height);
// console.log('图片展示高度'+this.state.imageHeight);
}
renderPicture(){
// gif图
if (this.props.pictureData.is_gif == '1'){
// console.log('gif图' + this.props.pictureData.height);
return(
<Image source={{uri:this.props.pictureData.cdn_img}} style={{width:width-20,height:this.state.imageHeight}}
indicator={ProgressBar}
/>
)
}
// 长图
if (this.state.imageHeight > height){
// console.log('长图'+this.props.pictureData.height);
return(
<Image source={{uri:this.props.pictureData.image0}} style={{width:width-20,height:height}} resizeMode='contain'
indicator={ProgressBar}
>
<View style={styles.longImageViewStyle}>
<Text style={styles.longImageTextStyle}>点击查看全图</Text>
</View>
</Image>
)
}
return(
<Image source={{uri:this.props.pictureData.cdn_img}} style={{width:width-20,height:this.state.imageHeight}}
indicator={ProgressBar}
/>
)
}
// 普通图片
render(){
return(
<View style={styles.imageViewStyle}>
<SatinItem satinData={this.props.pictureData.text} satinPress={this.props.satinPress}/>
<TouchableOpacity onPress={this.props.picturePress} activeOpacity={0.8}>
{this.renderPicture()}
</TouchableOpacity>
</View>
)
}
}
我在这个里面将图片的数据源和点击事件都做好了，之后可以通过这个点击事件来查看图片和长图。
遇到的坑
在react-native上Image有三种模式使用resizeMode来改变
cover：这个是默认的模式，在某些情况下，会导致长图加载出现问题。
stretch：这个模式会是长图完全填充Cell，很难看。
contain：最终选择了这个模式，虽然也不太好看，但起码不会出现问题。
安卓gif图加载
在 android/app/build.gradle 中需要添加以下内容
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
compile 'com.facebook.fresco:animated-base-support:0.11.0'
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:0.11.0'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'
// For WebP support, without animations
compile 'com.facebook.fresco:webpsupport:0.11.0'
}
视频
我只是完成了基本页面的搭建，这个在之后会做一下视频播放。
展示图片
在图片组件里面，我实现了图片的点击事件，所以可以在首页中通过点击跳转到另一个页面来展示gif和长图。
render() {
return (
<ScrollView
// 横向滚动
horizontal={false}
// 隐藏滚动条
showsHorizontalScrollIndicator={false}
// 弹簧效果
alwaysBounceHorizontal={false}
alwaysBounceVertical={false}
// 滚动效果
scrollEnabled={true}
style={styles.container}
>
{this.renderPicture()}
</ScrollView>
);
}
因为图片是长图，所以底部最好的选择就是放一个ScrollView。而又因为有的图片是长图，有的图片是gif，普通图片，所以最好也做一下判断。
renderPicture(){
if (this.state.imageHeight > height){
// console.log('长图'+this.props.pictureData.height);
return(
<TouchableOpacity onPress={()=>{this.popPress()}} activeOpacity={0.9}>
<Image source={{uri:this.props.pictureData.cdn_img}}
style={[styles.imageStyle,{height:this.state.imageHeight}]}
resizeMode='contain'
/>
</TouchableOpacity>
)
}
return(
<TouchableOpacity onPress={()=>{this.popPress()}} activeOpacity={0.9}>
<Image source={{uri:this.props.pictureData.image0}}
style={[styles.imageNormalStyle,
{height:this.state.imageHeight,marginTop:(height-this.state.imageHeight) / 2}]}
/>
</TouchableOpacity>
)
}
如果点击图片就会返回到上一级，所以，我们给图片加了个点击事件。
popPress(){
let {navigator} = this.props;
if (navigator) {
InteractionManager.runAfterInteractions(()=> {
navigator.pop();
});
}
}
导入组件
react-native-image-progress：因为react-native加载图片是没有展位图的（iOS有，安卓没有），所以导入这个组件用来做一个图片加载的动画。
react-native-progress/Bar：进度条，这个组件和上面组件是配套使用的，因为它们是同一个人写的。当然也可以独立使用，但我还没有引入ART，所以还没有真正的利用这个组件。
总结
因为现在用的电脑很卡，所以对于安卓的运行效果我没有去测试，等新电脑到了，我会将两端的适配完成。
如果在使用中遇到什么问题，欢迎私信和评论哦！
如果喜欢我的文章，关注我，给个star哦！
网友评论