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

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

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

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

Answer 3

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

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