不同的按钮，不同的图像？反应原生

Question

我是学生，我正在使用React Native开发移动应用程序。我的目标是这张图片：（https://cdn.discordapp.com/attachments/403580119714889736/407172407049060352/Apercu_bingo_2_choisir_invites.jpg）

我可以使用独立按钮编写代码，当我想为每个按钮添加不同的图像时会出现问题。 （我正在等待后面的开发人员创建一个boucle，用尽可能最短的代码添加所有图像（期待一些循环的想法;））。

import React, {Component} from 'react';
import Button from 'react-native-button';
import
{
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  Alert,
  Image,
  ScrollView,
  TouchableWithoutFeedback
}
from 'react-native';
import styles from './Styles';

class ToggleButton extends React.Component {

  render() {
    return (
      <View style={styles.cont2}>
        <TouchableHighlight style={styles.bubblechoice} onPress={this.props.onPress}>
              <View style={[styles.overlay, this.props.selected ? {backgroundColor: '#3C1088'} : {}]}>
               <Image style={styles.bubblechoice} source={require('./photo1.jpg')}/>
              </View>
        </TouchableHighlight>
      </View>


    );
  }
}

export default class MyComponent extends Component
{
  constructor(props) {
    super(props);
    this.state = {
      inv1: false,
      inv2: false,

    };
  }
  updateChoice(type) {
    let newState = {...this.state};
    newState[type] = !newState[type];
    this.setState(newState);
  }
  render() {
    return (
    <View style={styles.containerinvite}>
      <ScrollView contentContainerStyle={styles.list}>
          <ToggleButton label='inv1' onPress={() => { this.updateChoice('inv1') } } selected={this.state.inv1}/>
          <ToggleButton label='inv2' onPress={() => { this.updateChoice('inv2') } } selected={this.state.inv2}/>
      <TouchableWithoutFeedback
          onPress={() => {Alert.alert('OK');}}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>ok</Text>
          </View>
        </TouchableWithoutFeedback>
     </View>
    ); 
  }
  onPress1 = () => {
    this.setState({
      inv1: !this.state.inv1
    });
  }
  onPress2 = () => {
    this.setState({
      inv2: !this.state.inv2
    });
  }
}

我的结果是：https://scontent-cdt1-1.xx.fbcdn.net/v/t35.0-12/28580783_10216099091730046_1132055272_o.png?oh=fdb33bbe2b82f29cac1d80b8e25f269e&oe=5A9B2488&dl=1，https://www.facebook.com/事情是，改变状态颜色的视图不能没有孩子，所以我不能只从那里改变图像。我尝试了不同的选择，但我仍然可以使用独立按钮管理不同的照片。

Answer 1

在您的父组件中，您应该将照片传递给子组件，并将该支柱用于源而不是

<Image style={styles.bubblechoice} source={require('./photo1.jpg')}/>  =>> This is wrong.

<Image style={styles.bubblechoice} source={require(photoUrls)}/> =>> It should be like this.

如果您对此有任何疑问，请随时提出。