React-Native:替换flex-basis

Question

Flexbox布局有一个名为flex-basis的属性。根据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显然不支持此属性。我如何在RN中解决这个问题，或者更具体地说，我如何实现这样的布局：

​

​

在该图中，"1“、"2”等是列表的一部分，应该占用大约50%的可用空间，以便两个元素可以放在一行中，并在它们周围留出一点空白处。

Answer 1

flexBasis属性可以在RN.中使用，是的，我们可以为flexBasis属性赋予像素和%值。像素值可以直接给出，百分比值也可以使用像0.4这样的点来定义父的40%。

我们还可以使用RN的Dimensions (从RN导入维度)，如

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

，并且可以在样式中使用，如

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

与上面使用的width属性类似，我们也可以为flexBasis属性提供相同的值。

这是您所期望的布局的简单解决方案。

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

样式化部分：

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,
  }  
});

还参考了npm包，以获得更好的样式 ，包括%、rem单位和媒体查询以及各种功能。

Answer 2

我也在学习React Native和Flexbox。你的问题促使我尝试使用flex-basis，因为我也遇到了麻烦。

我使用的是RN0.34，并在iOS模拟器中运行。

我发现RN部分支持"flexBasis“。flexBasis值只能是数字。这个数字不能引用。像'%‘或'px’这样的限定符会导致运行时错误。

flexBasis让我可以控制一行文本元素的相对宽度。(看起来RN将flexBasis值解释为百分比。)您可以通过在RN模拟器中运行以下代码来查看这一点。

<View >
        <Text>1a) Basic flexBasis</Text>
<View style={{flexDirection: 'row'}}>
    <Text style={{ backgroundColor: "lightgray", flexBasis: 40 }}>foo</Text>
    <Text style={{ backgroundColor: "lightgreen", flexBasis: 20 }}>bar</Text>
    <Text style={{ backgroundColor: "lightblue", flexBasis: 40}}>baz</Text>
</View>

<Text>1b) Basic flexBasis, but with different values and effect than 1a.</Text>
<View style={{flexDirection: 'row'}}>
    <Text style={{ backgroundColor: "lightgray", flexBasis: 10 }}>foo</Text>
    <Text style={{ backgroundColor: "lightgreen", flexBasis: 80 }}>bar</Text>
    <Text style={{ backgroundColor: "lightblue", flexBasis:10}}>baz</Text>
</View>

<Text>2) Adding flexGrow makes the items fill the row.</Text>
<View style={{flexDirection: 'row'}}>
    <Text style={{ backgroundColor: "lightgray", flexGrow: 1, flexBasis: 10 }}>foo</Text>
    <Text style={{ backgroundColor: "lightgreen", flexGrow: 2, flexBasis: 80 }}>bar</Text>
    <Text style={{ backgroundColor: "lightblue", flexGrow: 1, flexBasis:10}}>baz</Text>
</View>

<Text>3) Flexbox attirbutes spaceBetween and spaceAround didn't work. But CSS margin can separate the items.</Text>
<View style={{flexDirection: 'row'}}>
    <Text style={{ backgroundColor: "lightgray", marginRight: 10, flexGrow: 1, flexBasis: 10 }}>foo</Text>
    <Text style={{ backgroundColor: "lightgreen", flexGrow: 2, flexBasis: 80 }}>bar</Text>
    <Text style={{ backgroundColor: "lightblue", marginLeft: 10, flexGrow: 1, flexBasis:10}}>baz</Text>
</View>
</View>

在其他博客文章中，我看到了人们使用borderRadius绕过元素角的例子。但当我尝试他们的代码时，我并没有得到圆角。

可能最初的发帖已经找到了答案。也许另一个RN新手会发现这个信息很有帮助。