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

Question

我的 React Native 应用程序中有一个简单的按钮组件，仅使用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};
`;

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

这不起作用。它仍然占用所有可用空间。当我flex: ${props => props.flex || 0};一起摆脱这条线时，它正在工作，但我想将其设置为flex: 1有时（可重用组件）

那么flexreact-native 组件的默认设置是什么？

我已经尝试过undefined，null并-1但根本没有效果。

Answer 1

设置 Flex：没有一个对我有用，所以 -

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