Question

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

Answer 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进行了测试，但我想它应该可以与其他任何图标一起使用。

Answer 2

您可以使用react-native-vector-icons在包含图像的视图内添加图标。您还可以使用该库添加一个图标按钮组件，其外观类似于

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

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>

如何将“ edit”图标作为按钮添加到react-native中的<img/>组件

3 个答案: