Question

全部。我正在学习有关如何使用react-native-table-component创建表的示例。我希望表格可滚动，第一列是可按下按钮。但它无法在第一列中显示按钮，而仅在左列中显示。我不知道出什么问题了，你们能帮我吗？

这是我的桌子课

class MyOrdersTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ["Img", "Qty", "C.ICode", "Name", "Price", "Amount"],
      widthArr: [40, 60, 80, 100, 120, 140],
      tableData: [
        ["1", "2", "3", "4", "2", "3"],
        ["a", "b", "c", "d", "b", "c"],
        ["1", "2", "3", "4", "b", "c"],
        ["a", "b", "c", "d", "2", "3"],
      ],
    };
  }

  render() {
    const state = this.state;
    const element = (img, index) => {
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>;
    };

    return (
      <ScrollView horizontal={true}>
        <View>
          <Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}>
            <Row
              data={state.tableHead}
              widthArr={state.widthArr}
              style={styles.header}
              textStyle={styles.text}
            />
          </Table>
          <ScrollView style={styles.dataWrapper}>
            <Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}>
              {state.tableData.map((rowData, index) => (
                <TableWrapper key={index} style={styles.row}>
                  {rowData.map((cellData, cellIndex) => (
                    <Cell
                      key={cellIndex}
                      data={
                        cellIndex === 0 ? element(cellData, index) : cellData
                      }
                      textStyle={styles.text}
                    />
                  ))}
                </TableWrapper>
              ))}
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  header: { height: 50, backgroundColor: "#537791" },
  text: { textAlign: "center", fontWeight: "100" },
  dataWrapper: { marginTop: -1 },
});

但是所有表数据都像这样一列

enter image description here

谢谢!!!!

Answer 1

由于您的样式错误，您错过了某些样式设置，例如hash #=> { # "lock_version"=>4, # "exhibition_quality"=>false, # "within"=>["FID6", "S2"], # "repository"=>{ # "ref"=>"/repositories/2", # "repository"=>{"ref"=>"/repositories/2"}, # "within"=>["FID6", "S2"], # "1more"=>{ a: 1, "within"=>["FID999", "S7"] } # } # }

您可以这样更改样式（从example和您的代码）：

styles.row

但是您必须进行微调，以更改按钮的索引及其样式。

希望此帮助：）

反应本机表组件无法显示右列

1 个答案: