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% 的可用空间，以便 2 个元素可以放在一行中，并在它们周围留出一点边距。

Answer 1

flexBasis 属性可以在 RN 中使用。 是的，我们可以为 flexBasis 属性提供 pixel 以及 % values。可以为此直接给出像素值，百分比值也可以使用 0.4 定义 40% 的父节点之类的点给出。

我们也可以使用RN的Dimensions(import Dimensions from 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 包以获得更好的样式 https://github.com/vitalets/react-native-extended-stylesheet，包括 %、rem 单位和媒体查询以及各种功能。

Answer 2

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

我正在使用 RN 0.34 并在 iOS 模拟器中运行。

我发现 RN 部分支持“flexBasis”。 flexBasis 值只能是数字。不能引用数字。 '%' 或 'px' 等限定符会导致运行时错误。

flexBasis 让我可以控制一行中 Text 元素的相对宽度。 （看起来 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 新手会发现此信息很有帮助。