React-Native：替代 flex-basis

Posted 2023-03-06

【中文标题】React-Native：替代 flex-basis

【英文标题】：React-Native: Substitute for flex-basis

【发布时间】：2016-05-27 23:07:26

【问题描述】：

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

【问题讨论】：

您还在寻找这个问题的答案吗？我可以根据您的反馈修改或删除下面的答案。谢谢。

是的，我正在寻找答案 Micheal_B。请更新特定于 React Native 的解决方案。谢谢

【参考方案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 单位和媒体查询以及各种功能。

【参考方案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 新手会发现此信息很有帮助。

【讨论】：

RN 实际上并不运行 CSS，它的 JS 是在幕后运行的。 因此 % 或 px 在 RN 中还不算作样式用途。此外，出于样式目的，诸如 auto、inherit、initial 等 CSS 关键字将不计入 RN。 但是可以实现百分比值，请参考我的回答这个问题link。