react-native 类似于ios的底部弹出选择框

最新推荐文章于 2024-09-27 07:15:00 发布

小白的成长之路_

最新推荐文章于 2024-09-27 07:15:00 发布

阅读量1.2k

点赞数

文章标签： react-native 底部弹出框

本文链接：https://blog.youkuaiyun.com/XiaoZhuang__/article/details/102523219

版权

本文介绍如何在React-Native中创建一个类似于iOS的底部弹出选择框。提供了代码下载链接以及实现该功能所需的相关插件和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说先上图

下面是代码下载地址

https://download.youkuaiyun.com/download/xiaozhuang__/11856145

//相关插件

import ImagePicker from 'react-native-image-picker';
import {Overlay} from 'teaset';

//实现方式

<TouchableOpacity
    activeOpacity={.6}
    onPress={() => {
        this.choicePerm();
    }}
    style={styles.drawerCls2}>
    <Text style={{marginLeft: p(35), fontSize: p(30), color: '#222',}}>头像</Text>
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Image source={logourl ? {uri: configs.api.imageHost + logourl} : Images.home.head}
               style={{width: p(66), height: p(66), borderRadius: p(33)}}/>
        <Image source={Images.home.more}
               style={{marginLeft: p(20), width: p(13), height: p(23), marginRight: p(40)}}/>
    </View>
</TouchableOpacity>

choicePerm = (type, step) => {
    if (Platform.OS === 'android') {
        PermissionsAndroid.requestMultiple([PermissionsAndroid.PERMISSIONS.CAMERA,
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE])
            .then(res => {
                if (res[PermissionsAndroid.PERMISSIONS.CAMERA] !== "granted") {
                    Alert.alert(Language['xiangjiquanxian'], Language['quanxiantishi1']);
                } else if (res[PermissionsAndroid.PERMISSIONS.CAMERA] !== "granted") {
                    Alert.alert(Language['cunchuquanxian'], Language['quanxiantishi2']);
                } else {
                    this.choiceImage(type, step)
                }
            });
    } else {
        this.choiceImage(type, step)
    }
};

choiceImage = (type, step) => {

    if (this.state.isCheck) {
        return;
    }
    let overlayView = (
        <Overlay.PullView side={'bottom'} modal={true} rootTransform={'scale'} ref={v => this.overlayPullView = v}>
            <View style={{backgroundColor: '#fff'}}>
                <TouchableOpacity
                    activeOpacity={.8}
                    style={styles.overLayStyle}
                    onPress={() => this.setMemberAvatar()}
                >
                    <Text style={{color: '#393939'}}>{Language['paizhao']}</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={.8}
                    style={styles.overLayStyle1}
                    onPress={() => this._selectPhotoTapped()}
                >
                    <Text style={{color: '#393939'}}>{Language['xzxiangce']}</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={.8}
                    style={styles.overLayStyle}
                    onPress={() => this.overlayPullView && this.overlayPullView.close()}
                >
                    <Text style={{color: '#393939', fontWeight: '600'}}>{Language['quxiao']}</Text>
                </TouchableOpacity>
            </View>
        </Overlay.PullView>
    );
    Overlay.show(overlayView);
};

setMemberAvatar = () => {
    const options = {
        quality: 0.4,
        maxWidth: 500,
        maxHeight: 500,
        noData: true,
        storageOptions: {//是否做为临时图片存储
            skipBackup: true//在手机相册存储图片
        }
    };
    ImagePicker.launchCamera(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {

            console.log('User cancelled image picker');
        } else if (response.error) {

            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {

            console.log('User tapped custom button: ', response.customButton);
        } else {
            this.overlayPullView.close();
            // You can also display the image using data:
            // let source = { uri: 'data:image/jpeg;base64,' + response.data };
            //上传图片
            this.uploadImage(response.uri);
        }
    });
}

_selectPhotoTapped() {

    const options = {
        quality: 0.4,
        maxWidth: 500,
        maxHeight: 500,
        noData: true,
        storageOptions: {//是否做为临时图片存储
            skipBackup: true//在手机相册存储图片
        }
    };
    ImagePicker.launchImageLibrary(options, (response) => {
        if (response.didCancel) {
            console.log('User cancelled photo picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
        } else {
            this.overlayPullView.close();
            //上传图片
            this.uploadImage(response.uri);
        }
    })
}

//css

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f7f7f7'
    },
    drawerCls2: {
        flexDirection: 'row',
        height: p(84),
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        borderBottomWidth: hair,
        borderColor: '#e7e7e7'
    },
    buttonCls1: {
        width: p(120),
        height: p(46),
        borderRadius: p(4),
        backgroundColor: "#3c69f0",
        borderWidth: p(2),
        borderColor: "#3a67cc",
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: p(20)
    },
    buttonCls2: {
        width: p(120),
        height: p(46),
        borderRadius: p(4),
        backgroundColor: "#e7edf9",
        borderWidth: p(2),
        borderColor: "#e2e8f7",
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: p(20)
    },
    textCls1: {
        fontSize: p(24),
        color: "#fff"
    },
    textCls2: {
        fontSize: p(24),
        color: "#265df0"
    },
    inputTextView: {
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
        height: p(80),
        fontSize: 13
    },
    overLayStyle: {
        height: p(100),
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: p(1),
        borderBottomColor: '#939393'
    }, overLayStyle1: {
        height: p(100),
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: p(10),
        borderBottomColor: '#939393'
    },
});