如何在 react-native 中将“编辑”图标作为按钮添加到 <Image> 组件答案

【问题标题】：How to add "edit" icon as a button to <Image> component in react-native如何在 react-native 中将“编辑”图标作为按钮添加到 <Image> 组件
【发布时间】：2019-03-17 11:32:36
【问题描述】：

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

如果我能做到这一点会更好，而不用 <Image> 替换 <ListItem>

【问题讨论】：

标签： react-native react-native-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位置属性

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

使用来自react-native-elements 的Icon 进行测试，但我想它应该适用于任何其他图标。

【讨论】：

【解决方案2】：

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

<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
    name="edit"
    backgroundColor="#3b5998"
    onPress={this.edit}
  >
    Edit
</Icon.Button>

【讨论】：