从0到1利用React-Native构建百思不得姐(三)

如果感觉我写的不错，关注我，给个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哦！