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