如何做一些项目或标题不应该在本机反应中多次呈现答案

【问题标题】：How to do it some items or headers should not render multiple time in react native如何做一些项目或标题不应该在本机反应中多次呈现
【发布时间】：2021-11-23 15:43:59
【问题描述】：

我在右侧有表格，顶部有列，每个框都有标题所以。我只是想要那个。该标题不应重复。在每个盒子上。它应该只在列的顶部重复。

这里是代码 - https://snack.expo.dev/@xeteke8423/sellerformat

【问题讨论】：

标签： javascript arrays react-native

【解决方案1】：

您可以通过将 index 属性传递给 SecondaryBox 并有条件地渲染标题来解决这个问题。

在您的代码库中进行以下更改：

App.js：

//.......
              <View>
                {sample.map((item) => (
                  <View style={{ flexDirection: 'row' }}>
                    {item['sellerId']?.map((buyer, index) => (
                      <SecondaryBox sellerId={buyer} index={index} />
                    ))}
                  </View>
                ))}
              </View>
//.......

在您的SecondaryBox.js 中，有条件地呈现标题，如下所示：

//............
<ScrollView horizontal>
          {
            <View style={{ flexDirection: 'row' }}>
              <View style={{ marginLeft: 10 }}>
                {index === 0 ? (
                  <View style={{position: ""}}>
                    <Text>Seller Profile</Text>
                    <Text>View Remark</Text>
                    <Text>Unit/Price</Text>
                  </View>
                ) : (
                  <View style={{ height: 55 }}></View>
                )}
//............

这是输出：

【讨论】：