Question

我正在研究一个可以选择颜色的项目。一种颜色就是一张图像。当用户选择图像（彩色）时，我需要从该图像中获取值。例如：

<TouchableHighlight onPress={()=>this.onPress("I want to pass the color value")}>
<Image
    value={'I want this image to have a value, for instance Brown'}
    style={styles.image}
    source={require('../../assets/images/brown.png')}
/></TouchableHighlight>

在示例中，您可以了解我的意思。我还考虑过使用图像的网址和颜色作为名称来创建一个数组，以便可以通过地图获取值，但是我不知道该怎么做，因为我是React Native的新手。 / p>

const state = {quickReplies: ['test', 'test1']};

{this.state.quickReplies.map(reply =>

我希望你们能帮助我。

Answer 1

您可以通过设置状态来实现

<TouchableHighlight onPress={()=>{this.setState({selectedColor:'brown'})}}>
            <Image
                value={'I want this image to have a value, for instance Brown'}
                style={styles.image}
                source={require('../../assets/images/brown.png')}
            /></TouchableHighlight>

或者您可以在onPress方法中调用函数

<TouchableHighlight onPress={()=>{this.doSomething('brown')}}>
            <Image
                value={'I want this image to have a value, for instance Brown'}
                style={styles.image}
                source={require('../../assets/images/brown.png')}
            /></TouchableHighlight>

Answer 2

尝试一下：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imgs: [
        { url: '../../assets/images/brown.png', color: '#887766' },
        { url: '...', color: '...' },
        { url: '...', color: '...' },
      ],
    };
  }

  doSomething = ({ color, index }) => {
    // Access the rest of your img details:
    const imgDetails = this.state.imgs[index];
  };

  render() {
    const { imgs } = this.state;

    return imgs.map(({ url, color }, index) => (
      <TouchableHighlight onPress={() => this.doSomething({ color, index })}>
        <Image style={styles.image} source={{ uri: url }} />
      </TouchableHighlight>
    ));
  }
}

Answer 3

您可以使用字符串插值...在您的状态下使用一种活动颜色，将状态设置为该活动颜色，然后图像的来源将是

<TouchableHighlight onPress={()=>{this.setState(activeColor: 'brown')}}>
  <Image
   style={styles.image}
   source={require(`../../assets/images/${this.state.color}.png`)}
  />
</TouchableHighlight>

为图像React Native增加价值

3 个答案: