仿今日头条拉黑弹窗

IMG_0074.PNG

IMG_0075.PNG

使用：

                <CommonModalModule
                    animation={'fade'}
                    visible={this.state.modalVisible}
                    contentView={
                        <ComplaintView
                            ref='ComplaintView'
                            viewW={sizeDp(331)}
                            // viewH={sizeDp(201)}
                            homeView={
                                <ComplaintCell
                                    cellH={201}
                                    creator={this.addBlackItem ? this.addBlackItem.creatorName : ''}
                                    act1={() => {

                                        this.addBlackRequest(this.addBlackItem.bid,1,'')
                                    }}
                                    act2={() => {
                                        //反馈内容
                                        this.refs.ComplaintView._index = 1
                                    }}
                                    act3={() => {
                                        //拉黑
                                        this.blackCreatorId = this.addBlackItem.creatorId;
                                        this.addBlackRequest(this.addBlackItem.creatorId,4,'')
                                    }}
                                />
                            }
                            backView={
                                <ComplaintBackCell
                                    cellH={208}
                                    act={(desc) => {
                                        this.addBlackRequest(this.addBlackItem.bid,1,desc)
                                    }}
                                />
                            }
                        />
                    }
                    close={() => {this.setState({modalVisible:false})}}
                />

根Modal js代码

import React, {Component} from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    // Modal,
    Platform,
    StyleSheet, Dimensions,
    StatusBar,
} from 'react-native'
import Modal from "react-native-modal";

const {width, height} = Dimensions.get("screen");

class CommonModalModule extends Component {

    constructor(props) {
        super(props);

        this.state = {
            visible: this.props.visible,
        }
    }

    componentWillReceiveProps(props) {
        this.setState({visible: props.visible});
    }

    close = () => {
        requestAnimationFrame(() => {
            if (this.props.close) {
                // console.log("close","执行了父组件的close方法")
                this.props.close();
            } else {
                // console.log("close","执行本组件方法")
                this.setState({visible: false});
            }
        })
    };

    render() {

        const {animation,baseStyle} = this.props;

        return (
            <Modal
                style={{margin: 0}}
                deviceWidth={width}
                deviceHeight={height}
                transparent={true}
                visible={this.state.visible}
                animationType={animation ? animation : 'slide'}
                onRequestClose={() => this.close()}
            >
                <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={this.close}//点击灰色区域消失
                >
                    <StatusBar hidden={true}/>
                    <View style={[styles.container, baseStyle]}>
                        {this.renderContent()}
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }

    renderContent = () => {
        return (this.props.contentView);
    };
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.25)',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        // justifyContent: 'center',
        // alignItems: 'center'
    },
})

export default CommonModalModule;

根ScrollView js代码

import React, {Component} from 'react'
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    Animated,
    ScrollView
} from 'react-native'

const {width, height} = Dimensions.get('window');

class ComplaintView extends Component {

    constructor(props) {
        super(props);

        this._index = 0;// 当前正在显示的图片
    }

    render() {

        const {homeView, backView, viewW,viewH} = this.props;

        return (
            <View style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: sizeDp(width),
                height: sizeDp(height)
            }}>
                <View style={{width: viewW, height: viewH,backgroundColor:'#FFF',borderRadius:sizeDp(4)}}>
                    <ScrollView
                        scrollEnabled={false}
                        horizontal={true}
                        onTouchStart={() => this._onTouchStart()}
                        onTouchMove={() => console.log('onTouchMove')}
                        onTouchEnd={() => this._onTouchEnd()}
                        onScroll={() => this._onScroll()}
                        showsHorizontalScrollIndicator={false}
                        ref={(scrollView) => {
                            this._scrollView = scrollView;
                        }}
                    >
                        <Animated.View style={{width: viewW, height: viewH}}>
                            {homeView}
                        </Animated.View>
                        <Animated.View style={{width: viewW, height: viewH}}>
                            <View style={{flexDirection: 'row',alignItems:'center'}}>
                                <TouchableOpacity
                                    style={{
                                        width: sizeDp(50),
                                        height: sizeDp(35),
                                        justifyContent:'center',
                                        paddingLeft: sizeDp(22),
                                    }}
                                    onPress={() => {this._index = 0}}
                                >
                                    <Image
                                        style={{width:sizeDp(8),height:sizeDp(13),}}
                                        source={require('../images/back.png')}
                                    />
                                </TouchableOpacity>
                                <TouchableOpacity style={{flex:1,justifyContent:'center', height:sizeDp(35)}} activeOpacity={1}>
                                    <Text style={{
                                        textAlign: 'center',
                                        paddingRight: sizeDp(50),
                                        color:'#3478F6',
                                        fontSize:fontDp(15),
                                    }}
                                    >选择</Text>
                                </TouchableOpacity>
                            </View>
                            {backView}
                        </Animated.View>
                    </ScrollView>
                </View>
            </View>
        );
    }

    _onTouchStart() {

    }

    _onTouchEnd() {

        // 先滑动到指定index位置，再开启定时任务
        this._scrollView.scrollTo({x: this._index * this.props.viewW}, true);

    }

    _onScroll() {

    }
}

export default ComplaintView;

第一页 js代码

import React, {Component} from 'react'
import {
    View,
    Text,
    TouchableOpacity,
    Image,
} from 'react-native'

class ComplaintCell extends Component{

    constructor(props) {
        super(props);

    }

    render() {

        const {creator,act1,act2,act3} = this.props;

        let blackCreator = '拉黑作者:' + creator;

        return (
            <View style={{paddingLeft:sizeDp(22)}}>
                {this.cell(require('../images/uninterested.png'),'不感兴趣','减少这类内容',false,act1)}
                {this.cell(require('../images/feedback.png'),'反馈垃圾内容','低俗、标题党等',true,act2)}
                {this.cell(require('../images/pullBlack.png'),blackCreator,null,false,act3)}
            </View>
        );
    }

    cell(img,title,text,isNav,act) {
        const {cellH} = this.props;

        return (
            <TouchableOpacity
                style={{flexDirection:'row',justifyContent:'space-between',height:sizeDp(cellH/3),alignItems:'center',borderBottomWidth: isNav ? sizeDp(1) : 0,borderBottomColor:'#F5F5F5',borderTopWidth: isNav ? sizeDp(1) : 0,borderTopColor:'#F5F5F5'}}
                onPress={act}
            >
                <View  style={{flexDirection:'row',alignItems:'center'}}>
                    <Image style={{width:sizeDp(15),height:sizeDp(16),marginRight:sizeDp(22)}} source={img}/>
                    <View>
                        <Text style={{color:'#000',fontSize:fontDp(13)}}>{title}</Text>
                        {text ? <Text style={{color:'#999',fontSize:fontDp(10),marginTop:sizeDp(6)}}>{text}</Text> : null}
                    </View>
                </View>
                {isNav ? <Image style={{width:sizeDp(8),height:sizeDp(12),marginRight:sizeDp(22)}} resizeMode={'contain'} source={require('../images/my/new_arrow.png')}/> : null}
            </TouchableOpacity>
        )
    }
}

export default ComplaintCell;

第二页 js代码

import React, {Component} from 'react'
import {
    View,
    Image,
    TouchableOpacity,
    Text,
} from 'react-native'

class ComplaintBackCell extends Component{

    constructor(props) {
        super(props);

    }

    render() {

        const {act} = this.props;

        return (
            <View style={{paddingLeft:sizeDp(22)}}>
                {this.cell('低俗色情',act)}
                {this.cell('暴力血腥',act)}
                {this.cell('人身攻击',act)}
                {this.cell('诈骗信息',act)}
                {this.cell('违法信息',act)}
            </View>
        );
    }

    cell(text,act) {

        const {cellH} = this.props;

        return (
            <TouchableOpacity
                style={{
                    height:sizeDp((cellH-35) /5),
                    justifyContent:'center',
                    borderTopWidth:sizeDp(1),
                    borderTopColor:'#F5F5F5'
                }}
                onPress={() => {act(text)}}
            >
                <Text>{text}</Text>
            </TouchableOpacity>
        )
    }
}

export default ComplaintBackCell

之所以使用 react-native-modal 组件 请看这里