当我滚动时，react-native SectionList 无法滚动到位置

Question

我想实现一个类似通讯录的组件，但是SectionList在没有滚动的情况下点击右边的字母可以正常跳转。但是当它滚动时（并且惯性还没有结束），点击右边的字母不会跳转

反应原生：0.58.6 反应：16.8.3

 <SectionList
                ref="sectionList"
                renderSectionHeader={this.renderSectionHeader}
                getItemLayout={this.itemLayout}
                sections={this.props.dataList}
                renderItem={this.renderItem}
                keyExtractor={(item, index)=> String(index)}
                onScrollBeginDrag={(event)=>{
                    this.refs.letterspace.changeActive()
                }}
                refreshing={this.props.isRefreshing}
            />

点击右边的字母会触发如下功能

getIndex = (index) => {
        let rollIndex = index
        // console.log(rollIndex,'rollindex')
        this.refs.sectionList.scrollToLocation({animated: false, itemIndex: 0, sectionIndex: rollIndex})
    }

Answer 1

您可能需要forwardRef。下面是一个提供部分列表的组件示例。注意最后的导出是forwardRef

import React, { ForwardedRef, forwardRef, PropsWithRef } from 'react';
import { SectionList, SectionListData, SectionListProps } from 'react-native';

export type SectionScrollViewProps = PropsWithRef<
  Omit<SectionListProps<any>, 'sections' | 'renderItem'> & {
    children: JSX.Element[];
  }
>;
function SectionScrollViewWithRef(
  { children, ...props }: SectionScrollViewProps,
  ref: ForwardedRef<SectionList<JSX.Element>>
): JSX.Element {
  function renderItem({ item }: { item: JSX.Element }): JSX.Element {
    return item;
  }
  const sectionListSections: SectionListData<JSX.Element>[] = children.map((child) => ({
    data: [child],
  }));
  return (
    <SectionList ref={ref} sections={sectionListSections} renderItem={renderItem} {...props} />
  );
}
export const SectionScrollView = forwardRef(SectionScrollViewWithRef);

这是一个如何使用它的示例

import { useTheme } from "@react-navigation/native";
import React, { createRef } from "react";
import { Button, SectionList, Text, View } from "react-native";
import { SectionScrollView } from "./SectionScrollView";

export function ScrollSectionViewScreen() {
  const { colors } = useTheme();
  const scrollViewRef = createRef<SectionList>();
  return (
    <View style={{ flex: 1 }}>
      <Button
        color={colors.primary}
        onPress={() => {
          scrollViewRef.current?.scrollToLocation({
            sectionIndex: 0,
            itemIndex: 0,
          });
        }}
        title="0"
      />
      <Button
        color={colors.primary}
        onPress={() => {
          scrollViewRef.current?.scrollToLocation({
            sectionIndex: 1,
            itemIndex: 0,
          });
        }}
        title="1"
      />
      <Button
        color={colors.primary}
        onPress={() => {
          scrollViewRef.current?.scrollToLocation({
            sectionIndex: 5,
            itemIndex: 0,
          });
        }}
        title="5"
      />
      <SectionScrollView
        ref={scrollViewRef}
        style={{ flex: 1, borderColor: "yellow", borderWidth: 10 }}
      >
        <View
          key="0"
          style={{
            borderColor: colors.border,
            borderWidth: 10,
            minHeight: 300,
          }}
        >
          <Text style={{ color: colors.text }}>Section 0</Text>
        </View>
        <View
          key="1"
          style={{
            borderColor: colors.border,
            borderWidth: 10,
            minHeight: 300,
          }}
        >
          <Text style={{ color: colors.text }}>Section 1</Text>
        </View>
        <View
          key="2"
          style={{
            borderColor: colors.border,
            borderWidth: 10,
            minHeight: 300,
          }}
        >
          <Text style={{ color: colors.text }}>Section 2</Text>
        </View>
        <Text key="2" style={{ color: colors.text }}>
          Section 2
        </Text>
        <Text key="3" style={{ color: colors.text }}>
          Section 3
        </Text>
        <Text key="4" style={{ color: colors.text }}>
          Section 4
        </Text>
        <View
          key="5"
          style={{
            borderColor: colors.border,
            borderWidth: 10,
            minHeight: 600,
          }}
        >
          <Text style={{ color: colors.text }}>Section 5</Text>
        </View>
        <View
          key="6"
          style={{
            borderColor: colors.border,
            borderWidth: 10,
            minHeight: 600,
          }}
        >
          <Text style={{ color: colors.text }}>Section 6</Text>
        </View>
      </SectionScrollView>
    </View>
  );
}