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 should be 1 for both the places.

Flex:1 表示会占用if之后可用的整个space。因此，按钮放在那里与否并不重要。
当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>
  )
}

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

React Native: Make a view take the whole screen when other view is not present

javascript

react-native

flexbox

react-native-flexbox