Создание круглой кнопки с изображением путем добавления изображения в TouchableOpacity в React Native - PullRequest
Новая
       67

Создание круглой кнопки с изображением путем добавления изображения в TouchableOpacity в React Native

0 голосов
/ 12 июля 2020

Я хочу создать круглую кнопку для профиля pi c в 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;

1 Ответ

0 голосов
/ 12 июля 2020

Не забудьте добавить размеры изображения. Ржунимагу. Я совсем забыл, что: 

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