标签: react-native-sectionlist

我正在尝试做这样的事情：

问题：该项目是根据 React Native Docsimmutablejs构建的，我无法使用，因此我无法使用该组件的 numColumns props 功能。AFAIK，我唯一的选择是使用 VirtualizedList，正如文档指出的那样，但我不知道如何将单元格显示为网格，如上所示。FlatList

我已经尝试style在单元格和视图包装器中添加道具，但没有任何用于对齐单元格的代码（如我发布的图片）被忽略。事实上，当我使用 时，它表现得很完美ScrollView，但由于巨大的滞后，我将代码移至VirtualizedList.

有什么帮助吗？任何事情都会受到欢迎，我已经在谷歌上挖掘了很多，但我找不到任何关于此的信息。

一些示例代码：

      <View>
        <VirtualizedList
          data={props.schedules}
          getItem={(data, index) => data.get(index)}
          getItemCount={(data) => data.size}
          keyExtractor={(item, index) => index.toString()}
          CellRendererComponent={({children, item}) => {
            return (
              <View style={{any flexbox code gets ignored here}}>
                {children}
              </View>
            )}}
          renderItem={({ item, index }) => (
            <Text style={{also here}} key={index}>{item.get('schedule')}</Text>
          )}
        />
      </View>

我打电话给api来获取我的movieDataAPI:https://obscure-reaches-65656.herokuapp.com/api/getCloseTime？city = Xinsu&time = 18&eTime = 21

我认为数据是正确的SectionList,数据是一个包含大量对象的数组,但我仍然得到错误:

Cannot read property 'length' of undefined

无法弄清楚如何解决数据问题？

这是console.log(movieData);:

这是关于我的类组件渲染:

render() {
    const movieData = this.props.searchTime;

    if (this.props.loading) {
      return <Spinner text='Loading...' />;
    }
    console.log('movieData =>');
    console.log(movieData);

    return (
      <View>
        <SectionList
          renderSectionHeader={this.sectionComp}
          renderItem={this.renderSectionItem}
          sections={movieData}
          ItemSeparatorComponent={() => <View><Text></Text></View>}
          ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>Header</Text></View>}
          ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 …

我们的应用程序中有一个保护套。呈现UI后，用户尝试滚动到它抛出的部分scrolltoindex should be used in conjunction with getitemlayout or on scrolltoindex failed。现在，只有当他在UI渲染后立即执行此操作时，才会发生这种情况。

_scrollToSection = index => {
    setTimeout(() => {
        this.list.scrollToLocation({
            animated: true,
            itemIndex: -1,
            sectionIndex: index,
            viewPosition: 0
        });
    }, 150);
};

节列表渲染：

        <SectionList
            sections={this.props.sections}
            extraData={this.props.subscriber}
            ref={ref => {
                if (ref) {
                    this.list = ref;
                }
            }}
            automaticallyAdjustContentInsets={true}
            contentInsetAdjustmentBehavior={'automatic'}
            windowSize={100}
            ListHeaderComponent={this.props.header || null}
            ItemSeparatorComponent={() => (
                <Separator
                    style={[mediumStyle.separatorEnd, { backgroundColor: IOS_GREY_02_03 }]}
                />
            )}
            renderSectionFooter={() => <View style={{ height: 17 }} />}
            keyExtractor={(item, index) => index}
            removeClippedSubviews={false} …

我正在使用React Native的SectionList。SectionList中的数据看起来像这样

data: [
    {
      title: "Asia",
      data: ["Taj Mahal", "Great Wall of China", "Petra"]
    },
    {
      title: "South America",
      data: ["Machu Picchu", "Christ the Redeemer", "Chichen Itza"]
    },
    {
      title: "Europe",
      data: ["Roman Colosseum"]
    }
  ]

我有一个文本输入，尝试通过它过滤掉SectionList中的内容。我尝试使用Array.filter()，但似乎没有用。它返回我全部数据，而没有任何过滤。因此，我尝试了Array.some()。现在，即使有一项匹配，也会过滤该部分中的所有数据项。此行为是出于预期的Array.some()。但是我很困惑为什么Array.filter()我的案例不起作用。

我的SectionList看起来像这样，

<SectionList 
      sections={this.state.data.filter(sectionData => {
        sectionData = sectionData.data;
        return sectionData.filter(data => {
          return data.includes(this.state.searchTerm);
        })
      })}
      renderSectionHeader={({ section: { title } }) => ( <Text style={{ fontWeight: "bold" }}>{title}</Text> )}
      renderItem={({ item }) => …

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

我想按 3-30pm 返回索引 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 = …