大数据

使用React-Native写百思不得姐(三)

如果感觉我写的不错,关注我,给个star哦!项目地址

前言

经过前两篇文章的积累,已经大体上将项目结构完成了,接下来就是对内容的填充,自定义啦。今天就来说一下项目中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(
            
                
                
                    {this.props.itemData.name}
                    {this.props.itemData.passtime}
                
            
        )
    }

Cell底部布局

Cell底部自定义.png

仔细看一下会发现是4个按钮,每个按钮都左边是一个图片,右边是文字,每个按钮之间还有个分界线。

// Cell底部布局
bottomInfo(){
        return(
            
                {this.createBtn()}
            
        )
    }
// 创建Button
createBtn(){
        let btnArr = [];
        for(let i = 0 ; i < this.state.btnData.length ; i ++){
            let btnData = this.state.btnData;
            btnArr.push(
                {this.btnPress(i)}} activeOpacity={1}>
                    
                        {
                            btnData[i].selected ?
                                
                                :
                                
                        }
                        {btnData[i].title}
                        
                    
                
            );
        }
        return btnArr;
    }

Cell中间布局

接下来就是最重要的Cell中间的布局了

Cell内容自定义.png

Cell中间布局.png

上面两张图的共同点就是顶部都有一段文字,而下面可能是图片,视频,声音或者什么都没有。所以我们要将这里再细分一下。分为视频,图片,声音,段子。

        // 图片
        if (this.props.itemData.type == '10'){
            return(
                
            )
        }
        // 段子
        if (this.props.itemData.type == '29'){
            return(
                
            )
        }
        // 声音
        if (this.props.itemData.type == '31'){
            return(
                
                    {this.props.itemData.text}
                
            )
        }
        // 视频
        if (this.props.itemData.type == '41'){
            return(
                
                    
                
            )
        }

段子

通过上面的找规律发现,基本每个Cell都是有一段话的,可能是段子也可能是别的。但它们都是通过同一个接口获取的,所以我们将它们归于一类。

// 段子
class SatinItem extends Component{
    static defaultProps = {
        satinData: React.PropTypes.string,
        satinPress:null,
    };
    render(){
        return(
            
                
                    
                        {this.props.satinData}
                    
                
            
        )
    }
}

通过上面的代码,将段子的数据源和点击事件就设置好了。在之后的项目中会有很多地方用到段子的点击事件。

图片

在百思不得姐中图片有三种,普通配图,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(
                
            )
        }
        // 长图
        if (this.state.imageHeight > height){
            // console.log('长图'+this.props.pictureData.height);
            return(
                
                    
                        点击查看全图
                    
                
            )
        }
        return(
            
        )
    }
    // 普通图片
    render(){
        return(
                
                    
                    
                        {this.renderPicture()}
                    

                
        )
    }
}

我在这个里面将图片的数据源和点击事件都做好了,之后可以通过这个点击事件来查看图片和长图。

遇到的坑

在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 (
            
                {this.renderPicture()}
            
        );
    }

因为图片是长图,所以底部最好的选择就是放一个ScrollView。而又因为有的图片是长图,有的图片是gif,普通图片,所以最好也做一下判断。

renderPicture(){
        if (this.state.imageHeight > height){
            // console.log('长图'+this.props.pictureData.height);
            return(
                {this.popPress()}} activeOpacity={0.9}>
                    
                
            )
        }
        return(
            {this.popPress()}} activeOpacity={0.9}>
                
            
        )
    }

如果点击图片就会返回到上一级,所以,我们给图片加了个点击事件。

popPress(){
        let {navigator} = this.props;
        if (navigator) {
            InteractionManager.runAfterInteractions(()=> {
                navigator.pop();
            });
        }
    }

导入组件

react-native-image-progress:因为react-native加载图片是没有展位图的(iOS有,安卓没有),所以导入这个组件用来做一个图片加载的动画。
react-native-progress/Bar:进度条,这个组件和上面组件是配套使用的,因为它们是同一个人写的。当然也可以独立使用,但我还没有引入ART,所以还没有真正的利用这个组件。

总结

因为现在用的电脑很卡,所以对于安卓的运行效果我没有去测试,等新电脑到了,我会将两端的适配完成。
如果在使用中遇到什么问题,欢迎私信和评论哦!
如果喜欢我的文章,关注我,给个star哦!