How to change style for an particular column in React Native?

问题

So, i have been making a matrix kind of table design to place available seats in bus ! So, am looping though 2d and 3d arrays to make this view !

Here is the pic of the output !

In this pic as you see - the first row contains a big vertical rectangle seat first and then three square seats ! But, as the check the second row - it has jumped with a huge gap ?

As this is happening because of the first vertical rectangle, as the rectangle extends a bit - the second rows starts after that,

But the expected out put is as follows:

How to implement this, as i have tried to style to squares but there nothing happening as expected !

Here is my code for layout generation !

{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>
                    );
                  })}

As from the above, you can see am looping into 3d array, so if you guys need those function do let me know will update again !

Check here for Reproduced Snack

回答1:

The answer to this would be 'Think columns'

You are creating an array and rendering it as rows which would anyway render data with the spacing issue you have. So the best way to sort this problem would be to render data in columns.

Here you have to iterate through the rows and create columns first and then render them. You can see the inline comments for the logic.

  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>
  );

Snack with the output https://snack.expo.io/@guruparan/77427f

EDIT

Without all this processing you can do this, which is way after and straight forward

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>
  );
}

You can try it out here https://snack.expo.io/@guruparan/busseat

来源：https://stackoverflow.com/questions/64399383/how-to-change-style-for-an-particular-column-in-react-native