ネイティブ反復ボタンをクリックした後のオブジェクト

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

に雅をそれを行う方法をイマイチ場合、私はあなたがあなたのiを増やしており、このようなあなたのonPressイベントに状態を設定するstateを作成する必要があると思うので、申し訳ありません反応し、ネイティブのために非常に新しいです：

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データを呼び出すために、あなたは、このようにthis.state.iでiを変更する必要があります。

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

反応のネイティブについて詳しくはstateをご確認ください。documentationを読むことができます。私はこの答えがあなたを助けることを願っています。

Answer 2

あなたがループ内でthis.setStateを行う際this.setStateが再レンダリングに50回の原因となりますので、あなたはこのように行う必要があります。

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> 
    ); 
    } 
}