Question

我在调用scrollToIndex时遇到FlatList组件的问题。以下是我引用该列表的方式。

<Modal visible={modal} transparent onRequestClose={this.onClose}>
      <TouchableWithoutFeedback onPress={this.onClose}>
        <View style={overlayStyle}>
          <Animated.View style={[styles.picker, pickerStyle]}>
            <FlatList
              ref={(node) => { this.scroll = node; }}
              style={styles.scroll}
              data={data}
              renderItem={this.renderItems}
              getItemLayout={(_, index) => (
                { length: 24, offset: 24 * index, index }
              )}
              initialNumToRender={5}
              // scrollEnabled={visibleItemCount < itemCount}
              contentContainerStyle={styles.scrollContainer}
              keyExtractor={(item) => item.value}
              automaticallyAdjustContentInsets={false}
              removeClippedSubviews={false}
              indicatorStyle="white"
            />
          </Animated.View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>

我包含了周围的代码以防万一。但由于某些原因，我得到了一个与正常情况不同的结构，并且错误表明_scrollRef.scrollToIndex未定义。当我检查树和ref组件时，我似乎回到了_listRef的正确结构 - ＆gt; _scrollRef但内容是视图引用或textinput引用的内容。看起来像......

blur
context
focus
measure
measureInWindow
measureLayout
props
refs
setNativeProps
state
updater

我对这种情况非常困惑，并且对于为什么会很棒有所了解。

编辑：这是scrollToIndex的代码。承诺方法是RN社区的某个人推荐的。我之前只使用了设置超时。

const wait = new Promise((resolve) => setTimeout(resolve, 500));
        wait.then(() => {
          if (this.mounted) {
            console.log(this.scroll);
            if (this.scroll) {
              this.scroll
                .scrollToIndex({ index: 0, animated: false });
            }

            Animated
              .timing(opacity, {
                duration: animationDuration,
                toValue: 1,
              })
              .start(() => {
                // if (this.mounted && Platform.OS === 'ios') {
                //   this.scroll.flashScrollIndicators();
                // }
              });
          }
        });

FlatList Ref不正确

0 个答案: