justifyContent: 'space-evenly' 在 React Native 中

Question

我可以在 React Native 中的任何元素上使用 justifyContent: 'space-evenly' 吗？在哪些？语法应该是什么样的？

谢谢！

Answer 1

justifyContent: 'space-evenly' 在 React Native 0.54.0+ 中可用。您可以像使用任何其他 justifyContent 值一样使用该功能。例如：

<View style={styles.spaceEvenlyContainer}>
  {children}
</View>

const styles = StyleSheet.create({
  spaceEvenlyContainer: {
    flex: 1,
    justifyContent: 'space-evenly'
  }
});

详情请看以下内容：

0.52.0 Release Notes 介绍该功能（错误地 - 它尚未完全实现）
Commit 1050e0b 部分实现了功能
Pull Request #17805 完成功能实现
0.54.0 Release Notes 发布功能

Answer 2

如@Ben 所述，自 RN 0.52.0+ 起，您可以使用 justifyContent: 'space-evenly'。

你问题的第二部分，即 "on which ones?"

Justify Content
Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, and space-between. link to docs

因此，从逻辑上讲，它应该用于 容器视图 或元素以沿主轴布置它的子项。

第三部分问题"What should the syntax look like?"

语法简单，可以像

一样使用

<View style={{justifyContent: 'space-evenly'}}>children views...</View>

有关 justifyContent 的更多详细信息，您可以访问 this link

justifyContent: 'space-evenly' 在 React Native 中

justifyContent: 'space-evenly' in React Native

react-native

react-native-flexbox