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

Question

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

这样的事情

正如您所看到的那样，价格文本没有平等排列，因产品名称而异。如何编辑样式以使列表视图中的所有文本和按钮长度相等？

Answer 1

可以为每个文本字段分配一个flex值，如下所示：

        <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.