выравнивание гибкой коробки в строке

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