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为true，并且我们确实想查看带有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>
  )
}

React Native：在没有其他视图的情况下使视图占据整个屏幕

1 个答案: