时间戳

首页 > 解决方案 > 如何为巴士反应原生创建座位布局

api - 如何为巴士反应原生创建座位布局

问题描述

我想为公共汽车创建座位布局。所以，我找到了这个链接，它显示了如何创建座位图。

所以以下是我从 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 附近使用上述响应，因为行和列不会是恒定的，它将在每一行和每一列上都是动态的。在上述链接提供的示例中，列和行是固定的。我想动态访问它们。

标签： apireact-native

解决方案

使用表格组件并创建行、列。在包下面 安装 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 (let j = 0; j < a; j ++) { rowData.push( ${j},${i}); for (let 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>

    );
    }

推荐阅读