React Native：当其他视图不存在时，使视图占据整个屏幕

Question

这似乎是一个基本问题，但我似乎无法弄清楚或正确地对此进行搜索。 我有一个View，其中有两个其他视图，其中一个有时是隐藏的。所以组件看起来像这样：

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ flex: ??? }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: ?? }}>
        <Stuff/>
      </View>
    </View>
  )
}

现在，我要做的是让Stuff 组件在Button 不存在时覆盖整个屏幕。但是，如果props.showButtonView 为真，并且我们确实希望看到带有Button 的视图，我只想看到顶部的按钮，然后剩下的就是 Stuff 组件中的任何内容。我该怎么做？是基于弹性数字吗？

另外，您可能想知道为什么我首先需要将这两个分成单独的视图，原因是Stuff 组件中还有其他不相关的东西覆盖了按钮并且不允许我点击它。无论如何，长话短说，对于这种情况，View 将两者分开是强制性的。

Answer 1

这两个地方的 flex 都应该是 1。

Flex:1 表示它将占用 if 之后的全部可用空间。因此，按钮是否放置在那里并不重要。
当props.showButtonView 为 true 时，按钮位于顶部，然后您的东西放置在其后。

否则，

当props.showButtonView 为false时，按钮渲染代码将不会被执行，然后东西视图将遍布你的

props.showButtonView === true时试试下面的代码

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ width: '100%' }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: 1 }}>
        <Stuff/>
      </View>
    </View>
  )
}