Question

我想这样做，以便我可以单击一个按钮并转到我的json文件中的下一个对象。但我不确定如何继续点击for循环。我尝试在按钮中的onpress事件中添加一个i ++，但这不起作用，只是因为我认为在印刷机上的错误需要是一个功能。任何帮助都会很棒！我很反应原生如此抱歉，如果不这样做的话

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Button
} from 'react-native';

var jsonData = require('./skull.json');

export default class flashcards extends Component {
    render() {
        var i = 0;

        for (i; i < 50; i++) {
            var skull = jsonData[i];
            return (
                <View style={styles.container}>
                    <Text>
                        Question #{jsonData.quiz.question[i].number}
                    </Text>

                    <Text>
                        {jsonData.quiz.question[i].question}
                    </Text>
                    <Image
                        source={{ uri: jsonData.quiz.question[i].picture }}
                        style={styles.thumbnail}
                    />
                    <Button
                        title="Next Question"
                        color="#841584"
                        accessibilityLabel="Learn more about this purple button"
                    />
                </View>
            );
        }
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    thumbnail: {
        width: 300,
        height: 350
    }
});

AppRegistry.registerComponent('flashcards', () => flashcards);

Answer 1

Ya我认为您需要创建state来增加i，并在onPress事件中设置状态，如下所示：

export default class flashcards extends Component {
  constructor(props) {
    super(props);
    this.state = {i: 0};
  }

  onButtonPress = () => {
    if(this.state.i < 50){
      this.setState({
        i: this.state.i + 1
      });
    }
  }

  render() {
    return (
      <View style={styles.container}>

        ....//your code

        <Button
          onPress={this.onButtonPress}
          title="Next Question"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />

      </View>
    );
  }
}

要调用json数据，您必须使用i更改this.state.i，如下所示：

jsonData.quiz.question[this.state.i].question

有关详细信息，您必须了解本地的state，您可以阅读documentation。我希望这个答案可以帮到你。

Answer 2

您需要这样做，因为当您执行时， this.setState 会导致 50次 重新渲染。循环中的setState 。

export default class flashcards extends Component {
  constructor(props) {
    super(props);
    this.state = {i: 0};
  }

  onButtonPress = () => {
    let val = this.state.i;
    if(val < 50){
      va += 1
    }
    this.setState({ i: val });
  }

  render() {
    return (
      <View style={styles.container}>

        ....//your code

        <Button
          onPress={this.onButtonPress}
          title="Next Question"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />

      </View>
    );
  }
}

按钮单击后通过对象反应本机迭代

2 个答案: