Добавить значение к изображению React Native - PullRequest
Новая
       32

Добавить значение к изображению React Native

0 голосов
/ 03 апреля 2019

Я работаю над проектом, в котором вы можете выбрать цвет.Один цвет - это одно изображение.Когда пользователь выбирает изображение (цвет), мне нужно получить значение из этого изображения.В качестве примера: 

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

Надеюсь, вы, ребята, сможете мне помочь.

Ответы [ 3 ]

0 голосов
/ 03 апреля 2019

Попробуйте это: 

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>
    ));
  }
}
0 голосов
/ 03 апреля 2019

Вы можете использовать строковую интерполяцию ... иметь активный цвет в вашем состоянии, установить состояние для этого активного цвета, и тогда источником изображения будет 

<TouchableHighlight onPress={()=>{this.setState(activeColor: 'brown')}}>
  <Image
   style={styles.image}
   source={require(`../../assets/images/${this.state.color}.png`)}
  />
</TouchableHighlight>
0 голосов
/ 03 апреля 2019

Вы можете сделать это с помощью установленного состояния 

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