隐藏在反应本机上的可见性不起作用，即使没有显示空间

Question

我在弯曲容器之间的空间中具有触摸可触摸，我想占用空间，

我的代码：

<TouchableOpacity
  style={showClear && { visibility: 'hidden' }}
  onPress={() => this.props.clearCompleted()}>
  <Text>Clear Completed</Text>
</TouchableOpacity>

显示：无效，但不占用空间，上面的代码不起作用，而是在网络中？

Answer 1

在我的情况下，我需要使用该元素，所以我做了这样的事情：

<TextInput style={{opacity: 0, height: 0}} {...props} />

我希望这对我有问题的其他人有用。

Answer 2

update

---

React Native's Stylesheet现在支持使用display: 'none'和display:flex。

---

并非所有CS都在React Native中支持，其中包括visibility: hidden或display:none。

隐藏一个组件，而不是完全渲染，呈空视图或空。或者您想切换组件可见性，验证React的状态

<View>
   { !showClear && (
      <TouchableOpacity
         onPress={() => this.props.clearCompleted()}>
         <Text>Clear Completed</Text>
      </TouchableOpacity>
   }
</View>

showClear保存在状态

Answer 3

如Leu所述，您只能渲染null。

如果要保留可触摸可接触性的区域的另一个选项是设置opacity: 0.0的样式，但是您必须记住在TouchableOpacity的道具中也设置disabled={false}，以避免在Invisible区域上单击"无形"操作

>

Answer 4

仅将不透明度设置为0就足够了我的用例。

Answer 5

如果我们要确保元素在DOM上占空间，但是将其隐藏给用户，

步骤1：使用opacity: 0。

将其隐藏起来

步骤2：禁用隐藏元素的交互。

我们的JSX应该如下：

<IconButton
  icon="close"
  disabled
  style={styles.hiddenElement}
  onPress={() => console.log("Pressed")}
/>

我们的样式表应如下所示：

const styles = StyleSheet.create({
  ...
  hiddenElement: {
    opacity: 0,
  },
  ...
});