Question

我目前正在开发本机应用程序，但是flex有问题。
每次我以flex: 1或View元素的样式添加Text时，其高度等于0，这会导致该元素消失。

这是我要设计的：

（当然，这里的颜色只是为了帮助理解）

我的代码：

return (
    <View style={{paddingVertical: 7, display: 'flex', flexDirection: 'row', alignItems: "center", justifyContent: 'center', height: 50, borderWidth: 1}}>
        <View style={{flex: 1}}>
            <View style={{display: 'flex', flexDirection: 'column'}}>
                <View style={{flex: 1}}>
                     <View style={{display: 'flex', flexDirection: 'row'}}>                     <View style={{flex: 1, backgroundColor: '#0f0'}}>
                         <Text>
                             First name Last name
                         </Text>
                     </View>
                     <View style={{flex: 1}}>
                         <Text style={{textAlign: 'center'}}>
                             27 km
                         </Text>
                     </View>
                 </View>
             </View>
             <View style={{flex: 1}}>
                 <Text style={{textAlign: 'center'}}>Booked ride</Text>
             </View>
         </View>
     </View>
     <View style={{flex: 0}}>
         <TouchableOpacity onPress={this.onTake}>
             <Text style={styles.btnBox}>
                 Take
             </Text>
         </TouchableOpacity>
     </View>
 </View>
)

这是我目前的观点（重复了两个要素）：

Answer 1

第一个嵌套的<View>是无用的，将其删除并调整下一个，例如：

return (
  <View
    style={{
      paddingVertical: 7,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      height: 50,
      borderWidth: 1,
    }}>
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <View style={{ flex: 1 }}>
        <View style={{ display: 'flex', flexDirection: 'row' }}>
          <View style={{ flex: 1, backgroundColor: '#0f0' }}>
            <Text>First name Last name</Text>
          </View>
          <View style={{ flex: 1 }}>
            <Text style={{ textAlign: 'center' }}>27 km</Text>
          </View>
        </View>
      </View>
      <View style={{ flex: 1 }}>
        <Text style={{ textAlign: 'center' }}>Booked ride</Text>
      </View>
    </View>
    <View style={{ flex: 0 }}>
      <TouchableOpacity onPress={this.onTake}>
        <Text>Take</Text>
      </TouchableOpacity>
    </View>
  </View>

如果您想看看，我还制作了一种小吃：the diagram。现在，您可以按照偏好的方式对齐文本：）

Flexbox将高度设置为0

1 个答案: