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

Posted 2023-02-16

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

【英文标题】：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

【参考方案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>
                )
//............

这是输出：