Question

我的react native应用程序中有一个简单的Button Component，它仅由styled-components组成。看起来像这样：

const ButtonContainer = styled.TouchableOpacity`
  border-radius: 12px;
  margin: 6px;
  flex-basis: ${props => props.flexBasis || "20%"};
  background: ${props => props.backgroundColor || "orange"};
  justify-content: center;
  align-items: center;
  flex: ${props => props.flex || 0};
`;

因此，当我传递类似<ButtonContainer flex="1" />这样的flex道具时，我希望它填充可用空间。它按预期工作。但是，当我不传递flex属性时，我希望它的行为就像我从未设置过一样。（不要占用整个可用空间）。

这不起作用。它仍然占用所有可用空间。当我完全摆脱行flex: ${props => props.flex || 0};时，它就可以了，但是有时我想将其设置为flex: 1（可重用组件）

那么，本机组件的默认flex设置是什么？

我已经尝试过undefined，null和-1，但完全没有效果。

Answer 1

我不确定，我认为在RN中它不会有所不同，但是CSS flex rule的初始值为0 1 auto。您是否使用浏览器开发工具检查了特定元素/组件的DOM树，以查看在设置flex: initial时设置了什么？

const ButtonContainer = styled.TouchableOpacity`
  border-radius: 12px;
  margin: 6px;
  flex-basis: ${props => props.flexBasis || "20%"};
  background: ${props => props.backgroundColor || "orange"};
  justify-content: center;
  align-items: center;
  flex: ${props => props.flex || "initial"};
`;

[edit] NM，刚意识到您可以只使用initial作为后备值。

Answer 2

设置 flex: none 对我有用，所以 -

const Component = styled.View`
  flex: ${props => props.flex || 'none'};
`;

react-native组件的flex属性的“默认”值是什么？

2 个答案: