每次单击按钮时如何更改内容?

时间:2020-01-27 19:35:58

标签: react-native react-native-android

我正在制作一个应用程序来训练我的技能,其中显示了一些在我最喜欢的球队中创造了历史的球员。我很麻烦,因为当我按下按钮时无法切换到其他玩家,第一个总是出现,但是我不能让其他玩家按顺序出现,这是代码:

      constructor(props){
        super(props);
        this.state = {
          img: require('./src/bkn-lgo.png'),
          titles: '--',
          points: '--',
          assist: '--',
          reb: '--'
        }
        this.switchPlayer = this.switchPlayer.bind(this);
        this.players = [
          {
            name : 'Buck Wiliams',
            photo : require('./src/buck.jpg'),
            points : 23.8,
            assists : 1.3,
            rebound : 10.0
        },
        {
          name : 'Drazen Petrovic',
          photo : require('./src/drazen.jpg'),
          points : 15.4,
          assists : 2.4,
          rebound : 2.3
        },
        {
          name : 'Bernard King',
          photo : require('./src/bernard.jpg'),
          points : 22.5,
          assists : 3.3,
          rebound : 5.8
        },
        {
          name : 'Jason Kidd',
          photo : require('./src/kidd.jpg'),
          points : 12.6,
          assists : 8.7,
          rebound : 6.3
        },
        {
          name : 'Julius Erving',
          photo : require('./src/erving.jpg'),
          points : 24.2,
          assists : 4.2,
          rebound : 8.5
        }
      ]
    }

      switchPlayer(){

            this.setState({
            img: this.players[0].photo,
            titles: 0,
            points: this.players[0].points,
            assist: this.players[0].assists,
            reb: this.players[0].rebound
            })
      }

      render(){
        return(
          <View style={styles.container}>
            <View style={styles.title}>
              <Text style={styles.textTitle}>Players who made history in Brooklyn Nets</Text>
            </View>
            <View style={styles.imagee}>
              <Image style={styles.img} source={this.state.img}/>
            </View>
            <View style={styles.downArea}>
              <TouchableOpacity style={styles.button} onPress={this.switchPlayer}>
                <Text style={{color: 'white'}}>Anything</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.stats}>
              <Text style={styles.textDown}>Title: {this.state.titulos}</Text>
              <Text style={styles.textDown}>points: {this.state.points}</Text>
              <Text style={styles.textDown}>assists: {this.state.assist}</Text>
              <Text style={styles.textDown}>Rebounds: {this.state.reb}</Text>
            </View>       
          </View>
        );
      }
    }

我已经尝试过使用一个函数,如果要进行切换,但是没有成功

1 个答案:

答案 0 :(得分:0)

您始终在访问数组中的第一项。

this.players[0].photo

0是第一个项目,1是第二个项目,依此类推。您需要提取它并创建一个变量。您可以在状态下设置此变量。