react-native - ScrollView 无法使用 FlatList 水平滚动

Question

目前我有一个 FlatList 保存我的图像。此 Flatlist 位于 ScrollView 组件内，我希望 Flatlist 图像能够水平滚动。但是由于某种原因，即使在我的平面列表中启用了 Horizo​​ntal={true} 之后，我的额外图像也会进入下一行并且滚动是垂直的。参考图像

这是我的代码：

const ITEM_WIDTH = Dimensions.get('window').width / 1.2;
const BottomImages: React.FC<FamilyCarouselProps> = ({ family }) => {  

const columns = family.length;

  const [activeItemIndex, setActiveItemIndex] = useState()

return(
  <ScrollView horizontal={true}>
    <FlatList
      numColumns={columns}
      data={family}
      renderItem={({ item }) => {
        return (
          <ListItem
            itemWidth={(ITEM_WIDTH - (10 * columns)) / columns}
            image={item}
            itemIndex={item.id}
            activeItemIndex={activeItemIndex}
            onChangeActiveItemIndex={(index)=>{
              setActiveItemIndex(index)
            }}
          />
        );
      }}
    />
    </ScrollView>
);
}

标签： react-native

Answer 1

您应该在 FlatList 中而不是在 ScrollView 中启用水平道具。

const ITEM_WIDTH = Dimensions.get('window').width / 1.2;
const BottomImages: React.FC<FamilyCarouselProps> = ({ family }) => {  

const columns = family.length;

  const [activeItemIndex, setActiveItemIndex] = useState()

return( 
    <FlatList
      horizontal={true}
      numColumns={columns}
      data={family}
      renderItem={({ item }) => {
        return (
          <ListItem
            itemWidth={(ITEM_WIDTH - (10 * columns)) / columns}
            image={item}
            itemIndex={item.id}
            activeItemIndex={activeItemIndex}
            onChangeActiveItemIndex={(index)=>{
              setActiveItemIndex(index)
            }}
          />
        );
      }}
    /> 
);
}