reactjs - 为图像添加价值 React Native

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>

在示例中，您可以看到我的意思。我还考虑过使用图像的 url 和颜色作为名称创建一个数组，以便您可以使用地图获取值，但我不知道如何做到这一点，因为我是 React Native 的新手。

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>