React-Native：替代flex-basis [英] React-Native: Substitute for flex-basis

问题描述

Flexbox布局有一个名为 flex-basis 的属性。根据

在这幅图中，1，2等是列表的一部分，应占据可用空间的大约50％这两个元素放在一行中，并在它们周围留下一点空白。

解决方案

flexBasis属性可以用于RN 。是的，我们可以为flexBasis属性赋予像素以及％值。像素值可以给出这个和它的直线前进，百分比值也可以使用像 0.4定义40％的父母点。 b

我们还可以使用RN的Dimensions（从RN导入Dimensions），比如 $ b

  const deviceWidth = 。Dimensions.get（ '窗口'）的宽度; 
  

可用于像

  const styles = StyleSheet.create（{
 parent：{
 width：deviceWidth，
}，
 child：{
 width：deviceWidth * 0.5，//父$ 50的
} 
}）; 
  

类似于上面使用的width属性，我们也可以为flexBasis属性给出相同的值。 >

以下是预期布局的简单解决方案。

 < View> 
 {/ * first row * /} 
< View style = {styles.numbersRow}> 
< Text style = {styles.numberText}> 1< / Text> 
< Text style = {styles.numberText}> 2< / Text> 
< / View> 
 {/ *第二行* /} 
< View style = {styles.numbersRow}> 
< Text style = {styles.numberText}> 3< / Text> 
< Text style = {styles.numberText}> 4< / Text> 
< / View> 
< / View> 
  

造型部分：

  const styles = StyleSheet.create（{
 numbersRow：{
 flex：1，
 flexDirection：'row'，
 justifyContent：'space-around' ，//调整间距
 marginTop：30，
}，
 numberText：{
 flex：0.4，// 40％父$ b $ paddingVertical：30 ，// 30px从顶部和底部填充使其垂直居中
 borderRadius：8，
 textAlign：'center'，//水平居中
 backgroundColor：'＃000'，
颜色：'#fff'，
 fontSize：30，
} 
}）; 
  

另请参阅npm包以获得更好的样式 https://github.com/vitalets/react-native-extended-stylesheet ，包含％，rem单位和媒体查询以及各种功能。

The Flexbox layout has a property called flex-basis. According to CSS Tricks:

This defines the default size of an element 
before the remaining space is distributed. 
It can be a length (e.g. 20%, 5rem, etc.) or a keyword.

React Native apparently does not support this property. How do I work around this in RN or more specifically, how can I achieve a layout like this:

In that picture, the "1", "2" etc are part of a list and should take roughly 50% of the available space so that 2 elements fit into one row with a bit of margin around them.

解决方案

flexBasis property can be used in RN. And yes we can give pixel as well as % values for flexBasis property. Pixel values can be given for this and its straight forward, percentage value can also be given using points like 0.4 defines 40% of the parent.

We can also use Dimensions of RN(import Dimensions from RN), like

const deviceWidth = Dimensions.get('window').width;

and can be used in styling like

const styles = StyleSheet.create({
  parent: {
    width: deviceWidth,
  },
  child: {
    width: deviceWidth * 0.5, // 50% of the parent
  }
});

Similarly like width property used above, we can also give the same values for flexBasis property.

Here is the simple solution for your expected layout.

<View>
    {/* first row */}
    <View style={styles.numbersRow}>
          <Text style={styles.numberText}>1</Text>
          <Text style={styles.numberText}>2</Text>
    </View>
    {/* second row */}
    <View style={styles.numbersRow}>
          <Text style={styles.numberText}>3</Text>
          <Text style={styles.numberText}>4</Text>
    </View>
</View>

styling part:

const styles = StyleSheet.create({
  numbersRow: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around', // to adjust the spacing
    marginTop: 30,
  },
  numberText: {
    flex: 0.4, // 40% of the parent
    paddingVertical: 30, // 30px padding from top and bottom makes it vertically centered
    borderRadius: 8,
    textAlign: 'center', // horizontally centered
    backgroundColor: '#000',
    color: '#fff',
    fontSize: 30,
  }  
});

Also refer the npm package for better styling https://github.com/vitalets/react-native-extended-stylesheet, includes %, rem units and media queries as well and various features.

这篇关于React-Native：替代flex-basis的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！