Question

我想创建4个包含图像的按钮。按钮具有默认图像，但如果array [0]不为空，则第一个按钮应具有不同的图像，即array [0]。其他的应该是默认图片。

我尝试过：

我在这里在数组中设置了默认的4个项目：

    constructor(props) {
        super(props);

        this.state = {
          imgUrls: new Array(4),     
          defaultImage: require('../Images/addcircle.png'),
        };

  }

在这里，我从另一个组件拍摄图像。它以base64出现在我身上

componentWillReceiveProps(nextProps)
      {
            const { img: newImgUrl } = nextProps;
            const { img: imgUrl } = this.props;

            if ((newImgUrl !== imgUrl) && !this.state.imgUrls.includes(newImgUrl)) {
                const { imgUrls } = this.state;
                const imgUrlClone = imgUrls.slice(0);

                for (let i = 0; i < imgUrls.length; i += 1) {
                    if (!imgUrlClone[i]) {                  
                        imgUrlClone[i] = newImgUrl;
                        break;
                    }
                }
                this.setState({ imgUrls: imgUrlClone });

            }
      }

renderContent = () => {

            return imgUrls.map((url, index) => {
                return (
                <View key={index} >                
                  <TouchableOpacity onPress={() => this.removeImg(index)}>
                    <View style={{ height: '100%', justifyContent: 'center', alignItems: 'center', aspectRatio: 1 }}>
                      <Image
                        source={url !== '' ? { uri: url } : this.state.defaultImage}
                        style={{ height: '90%', width: '90%' }}
                      />                    
                   </View>
                  </TouchableOpacity>

                </View>
                );
            }); 

      };


render() {
   return (
    <View>
  {this.renderContent()}
     </View>
)

}

这不起作用。

Answer 1

自由创建非常简单的CodeSandBox 这是您要达到的目标吗？如果是这样，您的问题可能就是这种情况

已编辑：

我想在屏幕上看到此按钮。但是这些未显示。这些是默认图片

然后，当我发送图像时，我需要更改例如第一张图像。然后第二...但是当我单击按钮时，它添加了我发送的图像，但看起来像这样：

正如我所说，它应该排在第一位，然后当我发送第二张图像时，它应该排在第二位。我使用了下面的代码，但是它不显示默认图像，单击时它就像我在顶部显示。

我希望我能解释清楚，我不能使用codeandbox，因为我称webservise后面有很多东西。

如何使用.map创建带有图像的按钮

1 个答案: