通过在 React Native 中的 TouchableOpacity 中添加图像来制作圆形图像按钮答案

【问题标题】：Making a round image Button by Adding image inside TouchableOpacity in React Native通过在 React Native 中的 TouchableOpacity 中添加图像来制作圆形图像按钮
【发布时间】：2020-07-12 12:20:39
【问题描述】：

我想在 React Native 中为个人资料图片创建一个圆形按钮，但它不起作用。按钮应该是圆形的并且可以点击，并且里面应该有一个pmg图像。我在这里做错了什么？

我使用了蓝色背景图片，然后在顶部使用 TouchableOpacity 包装器将图片保存为按钮。

const Main = () => {
    return (
        // Container
        <View style={styles.container} >
            <ImageBackground
                source={require('../images/background.png')}
                style={styles.backgroundImage}>

                <View>
                    <TouchableOpacity style={styles.profileButton}>
                        <Image source={require('../images/profilePicture/boy.png')} />
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        // paddingTop: '6%',
        flex: 1,
    },

    backgroundImage: {
        flex: 1,
        resizeMode: "cover",
        width: '100%',
        height: '100%',
    },

    topBar: {
        height: '40%',
        // color : 'red',
        // flex: 1,
        // alignItems: 'stretch'
    },

    profileButton: {
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.2)',
        alignItems: 'center',
        justifyContent: 'center',
        width: '13%',
        height: 50,
        // backgroundColor: '#fff',
        borderRadius: 50,
    },
});

export default Main;

【问题讨论】：

标签： image react-native button touchableopacity

【解决方案1】：

请务必添加图片尺寸。哈哈。我完全忘记了：

profileButton: {
        borderWidth: 1,
        // borderColor: 'rgba(0,0,0,0.2)',
        width: '13%',
        height: 50,
        backgroundColor: '#fff',
        borderRadius: 50,
        padding: '1%',
        margin: '1%',
    },

    profileImage: {
        height: undefined,
        width: undefined,
        flex: 1
    },

【讨论】：