Как добавить иконку «Редактировать» как кнопку для компонента <Image>в реагирующем - PullRequest
Новая
       19

Как добавить иконку «Редактировать» как кнопку для компонента <Image>в реагирующем

0 голосов
/ 17 марта 2019

Я хочу добавить кнопку «Изменить» со значком в моем компоненте <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>

Ответы [ 3 ]

1 голос
/ 17 марта 2019

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

       <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 из act-native-elements но я думаю, что оно должно работать с любым другим Icon.

0 голосов
/ 17 марта 2019

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

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Icon
    name="edit"
    size={18}
    onPress={this.edit}
  >
    Edit
</Icon>
</ImageBackground>
0 голосов
/ 17 марта 2019

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

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