水平但不垂直生长的组件

Question

我想创建一个组件，该组件可以在任何容器中使用并且行为一致。在这种情况下，我的组件是一个输入字段，我希望它始终占用可用的水平空间，而不要占用可用的垂直空间。引起我麻烦的三个用例是：

1. 在<View style={{ flexDirection: "column" }}>内
2. 在<View style={{ flexDirection: "column", height: 200 }}>内
3. 在<View style={{ flexDirection: "row" }}>内

我为组件尝试了两种变体：

1. <View style={{ flex: 1, backgroundColor: "yellow" }}>中的内容
2. <View style={{ height: 40, backgroundColor: "yellow" }}>中的内容

（背景颜色用于调试）

• 容器样式1与组件样式1和2一起使用。
• 容器样式2仅适用于组件样式2-对于样式1，组件将占用所有剩余的垂直空间。
• 容器样式3仅适用于组件样式1-使用样式2时，组件水平挤压。

可能会有更多用例，但现在这些是我遇到的用例。

如何配置组件以使其与容器的配置方式无关？我很确定这是可以做到的，因为几乎所有输入字段的行为都与我试图实现的方式相同。