Question

在列表视图中点击renderRow中的listview数据显示刻度线时，我写得像这样

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数据，请给我建议，如何解决它任何帮助非常感谢

Answer 1

如果您希望重新呈现列表，则必须更改状态中的数据spirce 在组件构造函数上定义this.ds变量，该变量保存数据源对象，并在状态中放置您将用于列表数据的变量。例如，初始是

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

你希望用新数据写回复

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

你明白这个想法

Answer 2

据我所知，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，数据就不会改变

在listView中，renderRow在设置状态后没有调用

2 个答案: