如何在 react-native 中将 "edit" 图标作为按钮添加到 <Image> 组件

Question

我想在我的 <Image> 组件中添加一个带有图标的 "Edit" 按钮。以下是包含图像的 <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>

如果我能做到这一点就更好了，不用用 <Image>

替换 <ListItem>

Answer 1

您可以使用 react-native-vector-icons 在包含图像的视图中添加图标。您还可以使用该库添加一个图标按钮组件，它看起来像这样

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

Answer 2

您可以这样尝试：

       <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位置属性

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

使用 react-native-elements 中的 Icon 进行了测试，但我想它应该可以与任何其他图标一起使用。

Answer 3

尝试使用 ImageBackground 将您的图标包裹在其中，并出于图标目的使用 react-native-vector-icon 库。

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

如何在 react-native 中将 "edit" 图标作为按钮添加到 <Image> 组件

How to add "edit" icon as a button to <Image> component in react-native

react-native

react-native-image