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

我的 react-native 版本是：0.51.0 这里的问题是当数据最多 10 条记录时，我的代码在 OnTeam 函数中的 setState 之后工作，它再次渲染到 renderRow() 并显示刻度线，但问题是数据何时超过 10 条记录它不会进入 renderRow 数据，请给我建议如何解决它任何帮助非常感谢

4

2 回答 2

1

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

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

并且您希望使用新数据写入重新渲染

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

Uope 你明白这个想法

于 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 回答