javascript - 如何在 React Native 的 Flatlist 中添加自定义组件？

Question

我有一个关于 react native 的 Flatlist，它可以完美运行，最近看到一个 UI 在列表之间有一个自定义设计的组件，请查看下面的参考图片

查看此图片，在列表中添加了一个名为“Safety+”的新设计，如何做到这一点？

需要在里面随机添加如下自定义设计并且已经渲染了平面列表！如何实现这一点，因为我找不到或不明白从哪里开始

请检查图像并帮助实现这一目标：

 <FlatList 
                    contentContainerStyle={{ paddingBottom: 50 }}
                    data={this.state.availableBusList}
                    keyExtractor={item => item.id}
                    renderItem={({item}) => {
                        return(
                            <TouchableOpacity style={styles.busCardContainer}
                                    onPress={() => {
                                        console.log(item);
                                        //this.props.navigation.navigate('SeatLayout')
                                    }}

                                <Text>{item.name}</Text>
                                >)}}
/>

这是我的平面列表代码

标签： javascriptreactjsreact-native

Answer 1

您可以在您的 renderItem 函数中有条件地渲染：https ://reactjs.org/docs/conditional-rendering.html

此外，如果您想在特定索引处渲染自定义组件，您还可以将 index 参数放入 renderItem 中。这是我的例子：

<FlatList
  contentContainerStyle={{ paddingBottom: 50 }}
  data={this.state.availableBusList}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => {
    return index % 5 === 0 ? <CustomComponent /> : <NormalComponent />;
  }}
/>