行内柔性盒的对齐

Question

我正在尝试生成如下所示的一行数据但我在描述标题下遇到了麻烦

我正在使用的代码是

查看

<View style={styles.row}>
          <Text numberOfLines={1} style={styles.namePart}>{this.props.data.name}</Text>
          <Text numberOfLines={1} style={styles.description}>{this.props.data.description}</Text>
          <Text numberOfLines={1} style={styles.pricePart}>{this.props.data.price}</Text>
        </View>

样式

row:{
    height:rowheight,
    backgroundColor: Colors.white,
    flexDirection: 'row',
    padding: 16,
    borderRadius:0,
    borderWidth:0,
    borderBottomWidth:1,
    borderColor:Colors.border,
    margin:0,
    flexDirection: 'row',
  },
  namePart:{
    flexDirection: 'column',
    flex:4,
  },
  pricePart:{
    flex:1,
    alignItems:'center',
  },
  cartPart:{
    flex:1,
    alignItems:'center',
  },

目前正在呈现以下内容

Answer 1

您需要使用<View>创建名称和说明的flexDirection: 'column'，此块应位于<View> flexDirection: 'row'内。

类似的东西：

查看：

<View style={styles.row}>
  <View style={styles.column}>
    <Text numberOfLines={1} style={styles.namePart}>{this.props.data.name}</Text>
    <Text numberOfLines={1} style={styles.description}>{this.props.data.description}</Text>
  </View>
  <Text numberOfLines={1} style={styles.pricePart}>{this.props.data.price}</Text>
</View>

风格：

row: {
  flexDirection: 'row',
},
column: {
  flexDirection: 'column',
  flex: 4,
},
pricePart: {
  flex: 1,
}

你应该从styles.namePart

删除所有关于flex的内容