获取 SectionList 项 React-Native 的索引

Posted 2023-02-16

【中文标题】获取 SectionList 项 React-Native 的索引

【英文标题】：Get index of SectionList Item React-Native

【发布时间】：2019-03-05 06:01:31

【问题描述】：

我在从 SectionList React-Native 获取标题项的索引时遇到问题。通过按下标题，我试图获取项目的索引，然后将其传递给函数。我尝试了很多事情，但没有运气。有什么建议。谢谢

我想按下午 3-30 点返回索引 0 我可以按 Lucian，它返回我 0 这个想法是通过获取标题索引，我可以使用数组从列表中删除一个项目。

            <SectionList style = styles.itemSquare

        renderItem = (item, index, section) =>
            < Text style=styles.SectionListItemStyle key = index
            onPress=this.GetSectionListItem.bind(this, this.state.slotkeys[index])> item
            < /Text>

            renderSectionHeader = (section: title, index) => (
                  <TouchableHighlight >
                    <View>
                      <Text style=styles.SectionHeaderStyle
                      onPress=this.GetSectionListItem.bind(this, index)
                      > title
                      <Text style=styles.SectionHeaderCancel > index < /Text>
                      </Text>
                    </View>
                  </TouchableHighlight>
                )
            

          sections = this.state.slots.map(( time, chosen_user, name, chosen_syllabud, user_id ) =>
          ( title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index:1 ))

          keyExtractor = (item, index) => item + index
          />

【问题讨论】：

可以在renderItem函数中获取索引值，使item具有touchableopacity并提醒索引。

嗨，是的，renderitem 中项目的索引有效，但它让我获得了 sectionlist 中项目的索引，我需要获取标题的索引，因为其中有很多包含子项目的项目，il更新我的问题。

【参考方案1】：

renderSectionHeader 属性在调用时不会接收索引作为参数，但您可以修复 section 属性以正确通过 map 传递索引：

  sections = this.state.slots.map(( time, chosen_user, name, chosen_syllabud, user_id , index) =>
      ( title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index ))

然后在您的 renderSectionHeader 上，您可以访问该部分内的索引：

renderSectionHeader = (section: title, index) => (
              <TouchableHighlight >
                <View>
                  <Text style=styles.SectionHeaderStyle
                  onPress=this.GetSectionListItem.bind(this, index)
                  > title
                  <Text style=styles.SectionHeaderCancel > index < /Text>
                  </Text>
                </View>
              </TouchableHighlight>
            )
        

【讨论】：

非常感谢安德烈，效果很好。祝你有美好的一天:-)