"flexDirection: row" 无法使用在另一个 FlatList 中呈现的 FlatList 中的 contentContainerStyle？

Question

如果secondFlatlist直接渲染，会是这个结果

如果 secondFlatlist 在另一个 flatList 中呈现，则 flexDirection: 行无法应用。

如何在 FlatList 中连续显示“一”、“二”、“三”？

我的代码：

import * as React from 'react';
import { Text, View, FlatList } from 'react-native';

export default function App() {

  const SecondFlatlist = () => (
    <FlatList
      data={["one","two","three"]}
      renderItem={ ({item, index}) => (
        <Text>{item}</Text>
      )}
      keyExtractor={ value => value }
      contentContainerStyle={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        margin: 10,
      }}
    />
  )

  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignContent: 'flex-start',
      backgroundColor: '#ecf0f1',
      padding: 8,
    }}>
      <Text>Hope</Text>
      <SecondFlatlist />
      <Text>Hope</Text>
      <SecondFlatlist />
      <Text>Hope</Text>
      <SecondFlatlist />

      <FlatList
        data={["Poor","Bad","Good"]}
        renderItem={ ({item, index}) => (
          <>
            <Text>{item}</Text>
            <SecondFlatlist />
          </>
        )}
        keyExtractor={ value => value }
      />
    </View>
  );
}

Answer 1

您是否尝试为第二个 'Flatlist' 添加 horizontal: true？

在此处查看文档： https://reactnative.dev/docs/flatlist#horizontal

"flexDirection: row" 无法使用在另一个 FlatList 中呈现的 FlatList 中的 contentContainerStyle？

"flexDirection: row" is not working with contentContainerStyle in FlatList which is rendering inside another FlatList?

react-native

react-native-flatlist