反应本机传递给 renderItem 自定义组件？

Question

我目前正在尝试实现水平 FlatList。我知道我可以很容易地在 renderItem 中渲染项目列表，只需循环它......但我真的可以在里面传递一个自定义组件吗？

这是我创建的包含自定义组件的数组：

const arrayOfCustomComponents = [<Home/>,<News/>,<History/>,<Stats/>,<Settings />];

给定这个数组，我可以传递 renderItem 中的每个索引进行渲染吗？

 <Animated.FlatList
    data={data} 
    keyExtractor={item => item.key}
    horizontal
    showsHorizontalScrollIndicator={false}
    pagingEnabled
    bounces={false}
    renderItem={({item}) =>{
        return <View>
          {arrayOfCustomComponents[item.key]}
      </View> 
    }}
     
   />

Answer 1

您无法像在示例中那样访问 array 元素。数组的键是 0, 1, 2, ....

您可以做的是将组件存储在这样的对象中：

const DATA = [
  {
    id: 'comp1',
    description: 'This is component 1',
  },
  {
    id: 'comp2',
    description: 'This is component 2',
  }
];

const Comp1 = () => {
  return (
    <View><Text>This is component 1</Text></View>
  )
}

const Comp2 = () => {
  return (
    <View><Text>This is component 2</Text></View>
  )
}

const mapOfComponents = {
  comp1: <Comp1 />,
  comp2: <Comp2 />
};

function App() {
  return (
    <View>
      <FlatList
        data={DATA}
        renderItem={({ item }) => {
          return (
            mapOfComponents[item.id]
          )
        }
      }
        keyExtractor={item => item.id}
      />
    </View>
  );
}

反应本机传递给 renderItem 自定义组件？

React native pass to renderItem custom components?

native

reactjs

flatlist