如何更改 React Native 中特定列的样式？

Posted 2023-02-22

【中文标题】如何更改 React Native 中特定列的样式？

【英文标题】：How to change style for an particular column in React Native?

【发布时间】：2021-01-31 13:54:21

【问题描述】：

所以，我一直在制作一种矩阵式的桌子设计，以便在公共汽车上放置可用座位！所以，我正在循环 2d 和 3d 数组来制作这个视图！

这是输出的图片！

在这张照片中，如您所见 - 第一排首先包含一个大的垂直矩形座椅，然后是三个方形座椅！但是，作为第二行的检查 - 它已经跳出了巨大的差距？

由于第一个垂直矩形发生这种情况，因为矩形扩展了一点 - 第二行从那之后开始，

但预期的输出如下：

如何实现这一点，因为我尝试将样式设置为正方形，但没有按预期发生！

这是我的布局生成代码！

seatsMapping.map((z, i) => 
                    return (
                      <View key=i style=  >  
                        z.map((y, j) => 
                          return (
                            <View style= flexDirection: 'row'  key=j>
                              y.reverse().map((seat, p) => 
                                return (
                                  <View
                                    style= flex: 1,  
                                    key=p>
                                        
                                            seat != null &&  
                                            <View style= flexDirection: 'column' >
                                                this.seatLayoutgeneration(seat)
                                            </View>
                                        
                                  </View>
                                );
                              )
                            </View>
                          );
                        )
                      </View>
                    );
                  )

如上所示，你可以看到我正在循环进入 3d 数组，所以如果你们需要这些函数，请告诉我会再次更新！

Check here for Reproduced Snack

【问题讨论】：

你能试着把它做成一个sn-p吗？真的很容易解决

嘿，snack.expo.io/l3IVs4pVR 检查此链接以获取复制示例！

【参考方案1】：

答案是“思考专栏”

您正在创建一个数组并将其呈现为行，这无论如何都会呈现您遇到的间距问题的数据。所以解决这个问题的最好方法是在列中呈现数据。

在这里，您必须先遍历行并创建列，然后再渲染它们。您可以查看逻辑的内联 cmets。

  const renderData = (arr) => 
    const columns = [];

    //Go through the items in the row
    for (let i = arr[0].length - 1; i > -1; i--) 
      const column = [];
      //For each column in the row generate the contents
      for (let x = 0; x < arr.length; x++) 
        const seat = arr[x][i];
        const output = (
          <View style= flex: 1 >
            seat?.name && seat.length === '2' && seat.width === '1' ? (
              <View
                style=
                  width: 35,
                  height: 80,
                  borderRadius: 5,
                  borderColor: '#000',
                  backgroundColor: '#000',
                  borderWidth: 1,
                  marginBottom: 10,
                ></View>
            ) : seat?.name && seat.length === '1' && seat.width === '1' ? (
              <View
                style=
                  width: 35,
                  height: 35,
                  borderWidth: 1,
                  marginBottom: 10,
                  borderColor: 'red',
                ></View>
            ) : (
              <View style= width: 40 ></View>
            )
          </View>
        );
        //Add the content to the column
        column.push(output);
      
      //Add it to main container
      columns.push(<View>column</View>);
    

    return columns;
  ;

  return (
    <View>
      <Text>----- Seating ----</Text>

      seatsMapping.map((z, i) => 
        return (
          <View key=i>
            <Text>----- Z Axis Level: i ----</Text>
            <View style= flexDirection: 'row' >renderData(z)</View>
          </View>
        );
      )
    </View>
  );

小吃与输出 https://snack.expo.io/@guruparan/77427f

编辑

无需所有这些处理，您就可以做到这一点，这是非常直接的

export default function App() 
  const page1 = data.seats.filter((x) => x.zIndex == 0);
  const columnCount = 3;
  return (
    <View style=styles.container>
      page1.map((item) => (
        <View
          style=
            width: 35 * item.width,
            height: 35 * item.length,
            backgroundColor: 'red',
            margin: 3,
            position: 'absolute',
            left: (columnCount - item.row) * 40,
            top: item.column * 40,
          >
          <Text>columnCount - item.row + ' ' + item.column</Text>
        </View>
      ))
    </View>
  );

你可以在这里试试 https://snack.expo.io/@guruparan/busseat

【讨论】：

您好，感谢您的回复！我只是一个初学者！我收到一条错误消息，指出 null 不是对象等！我知道它是因为正在进行的 api 调用。而且，想听听如何优化这段代码，你能指导我吗？

数据的格式与您的数据变量的格式相同吗？

是的，格式相同！但是，我有各种条件来渲染！就像在 stockoverflow 中一样，我刚刚发布了一些！

举个例子——我贴的小吃只有卧铺结构的巴士，有座位巴士，也有组合巴士！所以，数据的格式是一样的，但渲染的条件是不同的！

所以，我可以分享我的全部内容，以便您更好地理解它！