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

Question

我想在 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;

Answer 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
    },

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

Making a round image Button by Adding image inside TouchableOpacity in React Native

image

button

react-native

touchableopacity