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

我想在我的&lt;Image&gt; 组件中添加一个带有图标的“编辑”按钮。以下是包含图像的&lt;View&gt; 的代码。

<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>

如果我能做到这一点会更好,而不用 &lt;Image&gt; 替换 &lt;ListItem&gt;

【问题讨论】:

    标签: 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-elementsIcon 进行测试,但我想它应该适用于任何其他图标。

    【讨论】:

      【解决方案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>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-07-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-08-03
          • 1970-01-01
          • 2020-02-12
          相关资源
          最近更新 更多