Question

我想知道如何为公共汽车创建座位布局。因此，我发现了这个link，它显示了如何创建座位图。

以下是我从API得到的响应

{"seats":[{"width":1,"fare":"","zIndex":0,"number":"A1","type":"A1","serviceTaxAmount":"0","convenience_charge":"0","commission":"","operatorServiceChargeAbsolute":"","operatorServiceChargePercent":"0","totalFareWithTaxes":"","ladiesSeat":"","bookedBy":"","ac":"true","sleeper":"","serviceTaxPer":"0","available":"","length":1,"id":"A1","seatid":"A1","row":0,"column":1},{"width":1,"fare":"1000","zIndex":0,"number":"A3","type":"A3","serviceTaxAmount":"0","convenience_charge":"0","commission":"","operatorServiceChargeAbsolute":"","operatorServiceChargePercent":"0","totalFareWithTaxes":"1000","ladiesSeat":"","bookedBy":"","ac":"true","sleeper":"","serviceTaxPer":"0","available":"1","length":1,"id":"A3","seatid":"A3","row":2,"column":1}]}

这是我到目前为止所做的

componentDidMount() {
return fetch(seat_url)
  .then((response) => response.json())
  .then((responseJson) => {

    this.setState({
      isLoading: false,
      row: responseJson.seats.row,
      column: responseJson.seats.column,
    }, function() {
    });

  })
  .catch((error) => {
    console.error(error);
  });

 }

因此，由于行和列不是恒定的，因此如何在ROWS和COLS附近使用上述响应，因此在每行和每列上都是动态的。在上面提供的示例中，链接列和行是固定的。我想动态访问它们。

Answer 1

使用表组件并创建行，列。安装在包装下面 npm install react-native-table-component

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
let myData1= [];
const rowData1= [];
const type_data= [];
let row_length=[];

let col_length=[];
let type_length=[];
let row_count,col_count,a,b,c,d;
componentDidMount() {


return fetch(seat_url)
  .then((response) => response.json())
  .then((responseJson) => {
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

      var resultresponse = responseJson.result;
    for (var i in resultresponse) {

      var seatresponse = resultresponse[i].seats;
      for(var j in seatresponse)
      {

        myData1.push(seatresponse[j]);
        row_length.push(seatresponse[j].row);
        col_length.push(seatresponse[j].column);
        type_length.push(seatresponse[j].type);
        rowData1.push(`${seatresponse[j].row},${seatresponse[j].column}`);

      }
    }
    row_count = Array.from(new Set(row_length));
    col_count = Array.from(new Set(col_length));
    a = row_count.length.toString();
    b = col_count.length.toString();
    c = row_length.length.toString();
    d = col_length.length.toString();

})
}
render() {
const state = this.state;
const tableData1 = [];
const tableData = [];
for (let i = 1; i <= b; i ++) {
rowData = [];
rowData2 = [];

//如果表行和列与您的响应行和列相匹配，则推送数据，否则分配为NULL。 for（让j = 0; j ${j},${i}）; for（让k = 0; k <= rowData1.length && k <= type_length.length; k ++）{ if（${j},${i} === rowData1 [k]） { rowData [rowData.indexOf（${j},${i}）] = myData1 [k]; }

  }
  for (let l = 0; l <= rowData1.length; l ++) {
    if(`${j},${i}` != rowData1[l])
    {
      rowData[rowData.indexOf(`${j},${i}`)] = 'NULL';
    }
  }
}
tableData.push(rowData);
}

return (

  <View style={styles.MainContainer}>
    <Table borderStyle={{borderColor: 'transparent'}}  >
      <Row  style={styles.head} textStyle={styles.text}/>
      {
          tableData.map((rowData, index) => (
           <TableWrapper key={index} style={styles.row}>
           {
          rowData.map((cellData, cellIndex) => (
            <Cell style={{backgroundColor: 'orange', margin:5, height:40, width:40}}  key={cellIndex} data={cellData.type} />
          ))
      }
      </TableWrapper>
      ))
     }
  </Table>
 </View>

    );
    }

如何为巴士React Native创建座位布局

1 个答案: