时间戳

首页 > 解决方案 > React Native：当其他视图不存在时，使视图占据整个屏幕

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

问题描述

这似乎是一个基本问题，但我似乎无法弄清楚或正确地对此进行搜索。我有一个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对于这种情况，两者的分离是强制性的。

标签： javascriptreact-nativeflexboxreact-native-flexbox

解决方案

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

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

否则，

当props.showButtonView为假时，按钮渲染代码将不会被执行，然后内容视图将遍布您的

试试下面的代码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>
  )
}

推荐阅读