Блог

Главная - Вопросы по программированию - Как добавить значок «редактировать» в качестве кнопки к компоненту в react-native

Как добавить значок «редактировать» в качестве кнопки к компоненту в react-native

#react-native #react-native-image

#react-native #react-native-image

Вопрос:

Я хочу добавить кнопку «Редактировать» со значком в мой <Image> компонент. ниже приведен мой код для <View> компонентов, содержащих изображение.

 <View style={{ flex: 1 }}>
    <View
        style={{
            justifyContent: 'space-evenly',
            alignItems: 'center',
            flexDirection: 'row',
            paddingVertical: 10
        }}
    >
        <Image
            source={{ uri: 'https://api.adorable.io/avatars/285/test@user.i.png' }}
            style={{
                marginLeft: 10, width: 100, height: 100, borderRadius: 50
            }}
        />
    </View>
</View>

будет намного лучше, если я смогу это сделать, не заменяя <ListItem> на <Image>

Ответ №1:

Вы можете попробовать это как:

        <View>
        <Image
            source={{ uri: 'https://api.adorable.io/avatars/285/test@user.i.png' }}
            style={{
                marginLeft: 10, width: 100, height: 100, borderRadius: 50
            }}
        />
      <Icon name={'edit'} containerStyle={styles.icon} onPress={console.log('I was clicked')}/>
     </View>

Затем стиль значка, как показано ниже: обратите внимание на absolute атрибут position

 icon: {
 backgroundColor: '#ccc',
 position: 'absolute',
 right: 0,
 bottom: 0
}

Протестировано с помощью Icon из react-native-elements, но я думаю, это должно работать с любым другим значком.

Ответ №2:

Попробуйте использовать ImageBackground, чтобы обернуть свой значок внутри него, и для этого используйте библиотеку векторных значков react-native.

 <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Icon
    name="edit"
    size={18}
    onPress={this.edit}
  >
    Edit
</Icon>
</ImageBackground>

Ответ №3:

Вы можете использовать react-native-vector-icons для добавления значка в представление, содержащее изображение. Вы также можете добавить компонент icon button, используя эту библиотеку, который будет выглядеть примерно так

 <Icon.Button
    name="edit"
    backgroundColor="#3b5998"
    onPress={this.edit}
  >
    Edit
</Icon.Button>