React-native動的に生成されたTouchableHighlight with画像

Question

私は、ユーザーがメンバーシップに3つのオプションのいずれかを選択できるフォームを持っています。私は画面を正しくレンダリングしますが、ボタンのトグルは機能しません。他のボタンをクリックすると、最初のオプションのままになります。ここに私のコードです

<View style={styles.mainview}> 
      <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => 
       <TouchableHighlight onPress={() => this.toggleOneYear(rowData.id, rowData.i)} style={styles.registerButton} underlayColor='#ffffff'> 
       <View style={styles.detailBoxTick}> 
        {renderIf(rowData.i == 1)(
        <Image style={styles.imageTickStyle} source={this.state.payoneyear ? Images.rememberTickImg : Images.rememberUnTickImg} /> 
       )} 
        {renderIf(rowData.i == 2)(
        <Image style={styles.imageTickStyle} source={this.state.paytwoyear ? Images.rememberTickImg : Images.rememberUnTickImg} /> 
       )} 
        {renderIf(rowData.i == 3)(
        <Image style={styles.imageTickStyle} source={this.state.paythreeyear ? Images.rememberTickImg : Images.rememberUnTickImg} /> 
       )} 
        <Text style={styles.tickBoxText}> 
        {rowData.card_duration} years Membership ${rowData.price} 
        </Text> 
       </View> 
       </TouchableHighlight> 
      } 
      enableEmptySections 
      /> 
     </View> 

toggleOneYear(id, counter) { 

    if (counter == 1) { 
     console.log('counter ', counter) 
     console.log('payoneyear ', this.state.payoneyear) 
     this.setState(
     { 
      payoneyear: true, 
      paytwoyear: false, 
      paythreeyear: false 
     } 
    ) 
     console.log('payoneyear ', this.state.payoneyear) 
    } 
    else if (counter == 2) { 
     console.log('counter ', counter) 
     console.log('payoneyear ', this.state.paytwoyear) 
     this.setState(
     { 
      payoneyear: false, 
      paytwoyear: true, 
      paythreeyear: false 
     } 
    ) 
     console.log('paytwoyear ', this.state.paytwoyear) 
    } 
    else if (counter == 3) { 
     console.log('counter ', counter) 
     this.setState(
     { 
      payoneyear: false, 
      paytwoyear: false, 
      paythreeyear: true 
     } 
    ) 
    } 
    } 

私は上記のコードで間違っていますか？いくつかの助けてもらえますか？ありがとうございます。

Answer 1

dataSourceを新しいrowDataで更新する必要があるようです。私はあなたが各touchableHighlight onPressでrowData.iをインクリメントしようとしていると思いますか？

renderRowの3番目のパラメータはrowIDです。私たちは更新する必要がある行を知るためにこれを必要とします。あなたはtoggleOneYearに渡したりTouchableHighlightたonPressに次のように置くことができます。

var newArray = this.state.db.slice(); 
    newArray[rowID] = { 
    // increment i, keep between 1-3 
    i: newArray[rowID].i + 1 > 3 ? 1 : newArray[rowID].i + 1, 
    }; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(newArray), 
     db: newArray, 
    }); 

私はそれらが唯一の3つのプロパティであり、私はあなたを想定してリストデータをレンダリングしているとして、あなたの意図がpayxxxyear状態変数であるかわかりませんよ同じ状態を使用する多くのTouchableHighlightがあります。代わりにおそらくデータソースの状態を使用する必要がありますか？

最近、ListViewは最新のRNバージョンで廃止されました。 https://facebook.github.io/react-native/docs/listview.html#renderrow