SettingView.js

import {Component} from 'react';
import React from 'react';
import {
    Dimensions,
    Image,
    View,
    Text,
    StyleSheet,
    TouchableOpacity, ToastAndroid,
} from 'react-native';

const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height;
import DropDownModal from '../SingleComponent/DropDownModal';
import RadioView from '../SingleComponent/RadioView';
import {PanResponder} from 'react-native';

/**
 *             偏好设置界面
 */
class SettingView extends Component {
    constructor() {
        super();
        this.state = {
            flag: null,
            building: null,
            floor: null,
            buildsListsetting: null,
        };
    }
    _panResponder = PanResponder.create({

        onStartShouldSetPanResponder: () => true,
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: () => {
            // console.log('开始移动：');
        },
        onPanResponderMove: (evt, gs) => {
            // console.log('正在移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);
        },
        onPanResponderRelease: (evt, gs) => {
            // console.log('结束移动：X轴移动了：' + gs.dx + '，Y轴移动了：' + gs.dy);
            if (gs.dx > 50) {
                // console.log('由左向右');
            } else if (gs.dx < -50) {
                // console.log('由右向左');
            } else if (gs.dy > 50) {
                // console.log('由上向下');
            } else if (gs.dy < -50) {
                // console.log('由下向上');
                // this.props.navigation.back();
                this.props.navigation.goBack()
            }
        },
    });




    checkCallBack = id => {
        this.setState({
            flag: id,
        });
    };
    _selectbuilding = (index, value) => {
        console.log(index + '--' + value);
        this.setState({
            building: value,
        });
    };
    _selectfloor = (index, value) => {
        console.log(index + '--' + value);
        this.setState({
            floor: index + 1,
        });
    };

    componentDidMount() {
        const {buildsListsort} = this.props.route.params;
        const {x1, x2, x3, zl, d1, d2, d3, w1, w2, w3, w4} =
            this.props.route.params.buildsListsort;
        const buildName = [x1, x2, x3, zl, d1, d2, d3, w1, w2, w3, w4];
        if (JSON.stringify(buildsListsort) == '{}') {
            console.log('空');
        } else {
            console.log('传参', buildsListsort);
            for (let i = 0; i < buildName.length; i++) {
                buildName[i].sort((a, b) => {
                    return a.people_num - b.people_num;
                });
            }
            this.setState({buildsListsetting: buildsListsort}, () => {
                console.log('回调', this.state.buildsListsetting);
            });
        }
    }

    render() {
        const {navigation} = this.props;
        const {buildsListsort} = this.props.route.params;
        // console.log('pppppp', this.state.buildsListsetting);
        // console.log('处理后', buildsListsort);
        return (
            <View  style={styles.container} {...this._panResponder.panHandlers}>
                <View style={styles.box1}>
                    <Image
                        source={require('../../../images/Map/Behavior.png')}
                        style={styles.box1image}
                    />
                    <Text style={styles.box1text}>偏好设置</Text>
                </View>
                <View style={styles.box2}>
                    <DropDownModal
                        data={[
                            '西3楼',
                            '西2楼',
                            '西1楼',
                            '中楼',
                            '东1楼',
                            '东2楼',
                            '东3楼',
                            '文1楼',
                            '东2楼',
                            '东3楼',
                            '东4楼',
                        ]}
                        title={'区域'}
                        imgSource={require('../../../images/Map/regionalRules.png')}
                        onChoosed={this._selectbuilding}
                    />
                </View>
                <View style={styles.box3}>
                    <DropDownModal
                        data={['1楼', '2楼', '3楼', '4楼', '5楼']}
                        title={'楼层'}
                        imgSource={require('../../../images/Map/floor.png')}
                        onChoosed={this._selectfloor}
                    />
                </View>
                <View style={styles.box4}>
                    <Image
                        source={require('../../../images/Map/Mytalent.png')}
                        style={styles.box4image}
                    />

                    <View style={{flex: 2}}>
                        <Text style={styles.text}>人少</Text>
                    </View>

                    <RadioView
                        id={1}
                        onCheck={this.checkCallBack}
                        checked={this.state.flag === 1}
                    />

                    <View style={{flex: 2}}>
                        <Text style={styles.text}>人多</Text>
                    </View>

                    <RadioView
                        id={2}
                        onCheck={this.checkCallBack}
                        checked={this.state.flag === 2}
                    />
                    <View style={{flex: 1.5}}/>
                </View>
                <View style={styles.box5}>
                    <TouchableOpacity
                        style={{
                            backgroundColor: '#F6C354',
                            width: deviceWidthDp / 4,
                            height: deviceHeightDp / 20,
                            marginBottom: 20,
                            justifyContent: 'center',
                            marginRight: 30,
                        }}
                        onPress={() => {
                            // console.log('this.state.flag', this.state.flag);
                            // console.log('this.state.building', this.state.building);
                            // console.log('this.state.floor', this.state.floor);
                            if (
                                this.state.flag == null ||
                                this.state.building == null ||
                                this.state.floor == null
                            ) {

                                ToastAndroid.show('请设置偏好~~(^v^)', 500);
                            } else {
                                navigation.navigate('RecommendView', {
                                    list: this.state.buildsListsetting,
                                    build: this.state.building,
                                    floor: this.state.floor,
                                    flag: this.state.flag,
                                });
                            }
                        }}>
                        <Text style={{color: '#FFFFFF', textAlign: 'center'}}>
                            开始匹配
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex: 10}}>
                    <Image
                        source={require('../../../images/Map/loading.png')}
                        style={styles.box5image}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        flex: 1,
        backgroundColor: '#F6B972',
    },
    box1: {
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        // backgroundColor: 'black',
    },
    box1image: {
        height: deviceHeightDp / 25,
        width: deviceWidthDp / 25,
        resizeMode: 'contain',
    },
    box1text: {
        textAlign: 'center',
        paddingTop: 5,
        color: '#FFFFFF',
    },
    box2: {
        flex: 1,
    },
    box3: {
        flex: 1,
    },
    box4: {
        flexDirection: 'row',
        flex: 1,
    },
    box4image: {
        width: null,
        height: null,
        flex: 1.2,
        resizeMode: 'contain',
    },
    text: {
        fontSize: 22,
        color: '#FFFFFF',
        textAlignVertical: 'center',
        flex: 1,
        textAlign: 'right',
    },
    box5: {
        flex: 1,
        alignItems: 'flex-end',
    },
    box5image: {
        width: null,
        height: null,
        flex: 1,
        resizeMode: 'contain',
    },
    box6: {
        flex: 1,
    },
});
export default SettingView;