如何在本机反应中计算renderRow答案

【问题标题】：how to calculate renderRow in react native如何在本机反应中计算renderRow
【发布时间】：2018-02-12 06:27:17
【问题描述】：

我正在尝试在 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 显示索引。它适用于 b.Name 和 c.Name。我怎么能这样做？

【问题讨论】：

标签： react-native

【解决方案1】：

我相信您可以将rowId 用于您的目的(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 希望这会有所帮助。

【讨论】：

@Ranjeet sing，rowId 应该是第三个参数。那么只有你会得到正确的ID。如果您用作第二个参数，那么您将获得 s1

【解决方案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>
    );
  }

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：