Question

我正在尝试在listView中计算renderRow。实际上我需要用数据显示行的索引。它适用于子项目，但不适用于父项。我确实喜欢这个 -

render() {
    return(
     <ScrollView style={styles.drawer}>
       <View style={styles.content} key={1}>
          <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(data) =>                        
                        <View>
                            <Text style={styles.navMenuTop}>
                                {'› '+data.Name}
                            </Text>

                             {data.SubItems.map((b,Index) =>
                              <View>
                                   <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>


                                   {b.SubItems != undefined && b.SubItems.map((c) =>         
                                     <View>
                                      <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
                                     </View>             
                                   )}


                               </View> 
                                )}
                        </View>
                        }
           />

        </View>
      </ScrollView>
    );
  }
}

我想用data.Name显示Index。它适用于b.Name和c.Name。我怎么能这样做？

Answer 1

我相信您可以将rowId用于{Q}目的(rowData, sectionID, rowID, highlightRow) => renderable，https://facebook.github.io/react-native/docs/listview.html 也许看看这个例子：https://medium.com/differential/react-native-basics-how-to-use-the-listview-component-a0ec44cf1fe8 希望这会有所帮助。

Answer 2

兰吉特，

您可以访问https://facebook.github.io/react-native/docs/listview.html#renderrow

在你的情况下，在renderRow回调中，您将收到4个参数（rowData，sectionID，rowID）所以只需像这样将rowID传递给你的UI函数

_renderRow(rowData, sectionID, rowID){  
    //use this rowID to show  Index with data.Name
    return <View>
      <Text style={styles.navMenuTop}>
        {'› ' + rowData.Name}
      </Text>

      {rowData.SubItems.map((b, Index) =>
        <View>
          <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, b.cPath)}> {'» ' + b.Name + "==" + Index}</Text>
          {b.SubItems != undefined && b.SubItems.map((c) =>
            <View>
              <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, c.cPath)}> {'»»»» ' + c.Name}</Text>
            </View>
          )}
        </View>
      )}
    </View>
  }



render() {
    parentIndex = 0;
    return (
      <ScrollView style={styles.drawer}>
        <View style={styles.content} key={1}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
          />
        </View>
      </ScrollView>
    );
  }

Answer 3

我这样做了：

render() {
    return(
     <ScrollView style={styles.drawer}>
       <View style={styles.content} key={1}>
          <ListView
                    dataSource={this.state.dataSource}
                     renderRow={((data,sectionID:number,rowID:number) =>                        
                        <View>
                            <Text style={styles.navMenuTop}>
                                {'› '+data.Name+rowID}
                            </Text>

                             {data.SubItems.map((b,Index) =>
                              <View>
                                   <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>


                                   {b.SubItems != undefined && b.SubItems.map((c) =>         
                                     <View>
                                      <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
                                     </View>             
                                   )}


                               </View> 
                                )}
                        </View>
                        }
           />

        </View>
      </ScrollView>
    );
  }
}

如何计算renderRow in react native

3 个答案: