在 Shopify / flash-list 中获得空白空间

Question

<View style={{flex:1}}>
     <FlashList
              data={routes.current}
              extraData={language}
              renderItem={renderScene}
              keyExtractor={item => item?.id}
              horizontal
              pagingEnabled
              getItemType={() => { return 2 }}
              onBlankArea={(e)=>{
                console.log('e',e)
              }}
              snapToAlignment="start"
              decelerationRate={'fast'}
              snapToOffsets={snapToOffsetsArray}
              disableIntervalMomentum
              estimatedItemSize={ScreenWidth}
              showsHorizontalScrollIndicator={false}
            />
          </View>

我正在使用这个，我这个列表运行良好，但是当我打开这个键盘并关闭这个键盘然后将项目渲染到半屏中时，我尝试将文本输入放在不同的地方，例如顶部。 App.js 位于 renderItem 内，但给出相同的结果。任何机构都面临同样的问题。

空白区域启动控制台

{"blankArea": 0, "offsetEnd": -411.42857142857144, "offsetStart": 0}

打开和关闭键盘后的控制台 {“blankArea”：-575.2380952380952，“offsetEnd”：-575.2380952380952，“offsetStart”：-659.047619047619}

Answer 1

也许这会对你有帮助：

import React from 'react';
import { View, Dimensions } from 'react-native';
import { FlashList } from '@shopify/flash-list';

const { width: ScreenWidth } = Dimensions.get('window');

const YourComponent = ({ routes, language, renderScene }) => {
  const snapToOffsetsArray = routes.current.map((_, index) => index * ScreenWidth);

  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={routes.current}
        extraData={language}
        renderItem={renderScene}
        keyExtractor={item => item?.id?.toString()}  // Ensure key is unique and string
        horizontal
        pagingEnabled
        getItemType={() => 2}
        onBlankArea={(e) => {
          console.log('Blank area detected', e);
        }}
        snapToAlignment="start"
        decelerationRate="fast"
        snapToOffsets={snapToOffsetsArray}
        disableIntervalMomentum
        estimatedItemSize={ScreenWidth}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

export default YourComponent;