以相等的块显示 React 本机列表视图项

【问题标题】：Displaying React native listview items in equal chunks以相等的块显示 React 本机列表视图项
【发布时间】：2018-04-20 10:31:25
【问题描述】：

我正在开发一个电子商务 React Native 项目。我有一个购物车组件，其中包含购物车中所有当前项目的列表视图。主要问题是样式。我根据数量显示每个产品 - 产品名称 - 价格和删除按钮。

像这样的

如您所见，价格文本并不一致，并因产品名称而异。如何编辑样式以使列表视图中的所有文本和按钮都等长？

【问题讨论】：

标签： css reactjs listview react-native

【解决方案1】：

每个文本字段都可以像这样分配一个弹性值：

        <Text style={{flex: 0.1}}>{product.quantity}x</Text>
        <Text style={{padding: 10, flex:0.5}}>{product.name.toString()}</Text>
        <Text style={{flex: 0.2}}>£{(product.quantity * product.price).toFixed(2)}</Text>
        <TouchableOpacity style={{flex: 0.2}} onPress={() => { this.removeItem(product) }}>

0.* 的总和应该等于 1。

【讨论】：