css - 基于 React Native 的 FlexBasis

Question

我有一个带有 flexBasis 百分比值的 View ，但我无法在 React Native 中呈现它。根据文档，Flex-Basis 属性接受 % 值。我怎样才能将它执行到 React 中？谢谢

<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
    <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(129, 139, 196, 0.4)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'10%', backgroundColor: 'rgba(129, 139, 196, 0.5)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'50%', backgroundColor: 'rgba(129, 139, 196, 0.6)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'3%', backgroundColor: 'rgba(129, 139, 196, 0.7)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'2.5%', backgroundColor: 'rgba(129, 139, 196, 0.8)'}}></View>         
    <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.5)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'2%', backgroundColor: 'rgba(226, 7, 23, 0.4)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'28.5%', backgroundColor: 'rgba(226, 7, 23, 0.3)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(226, 7, 23, 0.2)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.1)'}}></View>
</View>

Answer 1

如果你在周围的 View 上设置 flex 值，你将能够看到它

<View style={{flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
  <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(129, 139, 196, 0.4)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'10%', backgroundColor: 'rgba(129, 139, 196, 0.5)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'50%', backgroundColor: 'rgba(129, 139, 196, 0.6)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'3%', backgroundColor: 'rgba(129, 139, 196, 0.7)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'2.5%', backgroundColor: 'rgba(129, 139, 196, 0.8)'}}></View>         
  <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.5)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'2%', backgroundColor: 'rgba(226, 7, 23, 0.4)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'28.5%', backgroundColor: 'rgba(226, 7, 23, 0.3)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(226, 7, 23, 0.2)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.1)'}}></View>
</View>