1

リストビューでrenderRowのリストビューデータをクリックすると目盛りが表示され、このように書きました

constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state={
     dataSource: ds.cloneWithRows(['row 1', 'row 2'])
    }
  }
 componentDidMount(){
   //After getting data from service i am setting data to the dataSource
 this.setState({ dataSource: ds.cloneWithRows(responseData.data.listTeamBySportId) })
 }

    onTeam(rowData,rowID){
        if(this.state.opacity == rowID){
          this.setState({opacity:null})
        }else{
          this.setState({opacity:rowID})
        }
      }
    render(){
     <ListView
                       style={{flex:1}}
                      dataSource={this.state.dataSource}
                      renderRow={this.renderData.bind(this)}  
                      renderSeparator={(sectionID, rowID) => <View key=       {`${sectionID}-${rowID}`} style={styles.separator} />}
                      automaticallyAdjustContentInsets={false}/>
    }
    renderData(rowData,sectionID:number,rowID:number){
            return (
              <View style={styles.subBody}>
                <TouchableHighlight onPress={this.onTeam.bind(this,rowData,rowID)}>
                  <View  style={{backgroundColor:rowData.colorCode,height:44,flexDirection:'row'}}>
                     <View style={styles.centersubBody}>
                        <Text style={{color:'white',fontWeight:'bold',fontSize:17,fontFamily:'Roboto-Medium',marginLeft:10}}>{rowData.location}</Text> 
                     </View>
                    <View style={styles.rightsubBody}>
                        {this.state.opacity == parseInt(rowID) ? (
                        <Image style={{marginRight:5,marginTop:5, width:25, height:25, marginBottom:10}} source={require('image!selected')}/>
                        ):<View></View>}
                   </View>
                  </View>
                </TouchableHighlight>
              </View>
        );
       }

私の反応ネイティブバージョンは:0.51.0 ここで問題は、データが最大 10 レコードの場合です。私のコードは OnTeam 関数の setState の後に動作し、再び renderRow() にレンダリングされ、目盛りが表示されます。しかし問題は、データが10 レコードを超えると、renderRow データにアクセスできません。解決方法を教えてください。

4

2 に答える 2

1

リストを再レンダリングする場合は、状態のデータ スパイアを変更する必要があります。コンポーネント コンストラクターで、データソース オブジェクトを保持する this.ds 変数を定義し、リストのデータに使用する変数を状態に配置します。 . たとえば、イニシャルは

this.state ={
myDs: this.ds.cloneWithRows([])
}

そして、新しいデータ書き込みで再レンダリングしたい場合

this.setState({myDs: this.ds.clone...(arrNewData)};

あなたはその考えを理解しました

于 2016-07-23T12:49:36.400 に答える
0

私の知っているように、listViewコンポーネントは特別です。listView.dataSource の API があります。

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};

私の意見では、使用しない場合ds.cloneWithRows、データは変更されません

于 2016-07-22T07:28:09.317 に答える