react native：缩小列的方法是什么？答案

【问题标题】：react native: what is the way to narrow column?react native：缩小列的方法是什么？
【发布时间】：2021-05-12 08:25:17
【问题描述】：

我的示例有一个 2 列的表，大小相等 Containers_Count 和 Containers_Description，我只想缩小 Containers_Count 的列。这样做的方法是什么？我很乐意为此提供一些帮助。

import { Table, Row, Rows } from 'react-native-table-component';

const SikumHamechalim = () => {
  const [sikumVisible, setSikumVisible] = useState([]);
  const [tableData, setTableData] = useState([]);

  const arrangeData = () => {
    let rows = [];
    sikumVisible.forEach(e => {
      let row = [e.Containers_Description, e.Containers_Count];
      rows.push(row);
    });
    setTableData(rows);
  }
  useEffect(() => { arrangeData(); }, [sikumVisible]);

  return (
    <>
      <View style={styles.Secondary_title}>
        <Text style={styles.secondaryTitleText}>
          Choose
    </Text>
      </View>
      <View style={styles.DividerLine}></View>
      <ScrollView style={styles.container}>
        <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text} />
          <Rows data={tableData} textStyle={styles.dataText} />
        </Table>
      </ScrollView>
    </>
  )
};

const styles = StyleSheet.create({
  container: { backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6, fontWeight: 'bold', fontSize: 16, alignSelf: 'center' },
  dataText: { margin: 10, fontSize: 16, textAlign: 'center' },
});

【问题讨论】：

标签： javascript reactjs react-native react-hooks react-native-table-component

【解决方案1】：

您可以使用 flexArr 属性缩小列（参见 Properties 部分）。

flexArr 的值取决于您想要的第一列和第二列之间的比率。（在下面的例子中，比例是 1:3）

<Table borderStyle={{borderWidth: 1}}>
  <Rows data={tableData} flexArr={[1, 3]} />
</Table>

https://snack.expo.io/@moshfeu/narrow-column

【讨论】：