Question

我有一个可触摸的不透明性，并且里面有一些视图。我有一个特定的视图，我不希望它是可单击的。我该如何实现？

Answer 1

进入该视图并添加道具=> pointerEvents:none

<View pointerEvents="none" />

请参阅here

Answer 2

您不希望其可单击的特定视图应为“ TouchableOpacity” ，但具有 activeOpacity = {1} 。这样，父级TouchableOpacity将无法工作，并且 activeOpacity = {1} 将其设为禁用

完整代码

import React, { Component } from "react";
import { TouchableOpacity, View, Text } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, margin: 50 }}>
        <TouchableOpacity
          style={{ backgroundColor: "red", width: 250, height: 250 }}
        >
          <TouchableOpacity
            style={{
              backgroundColor: "green",
              width: 100,
              height: 100,
              margin: 20,
              alignItems: "center",
              justifyContent: "center"
            }}
            activeOpacity={1}
          >
            <Text>No Click Area</Text>
          </TouchableOpacity>
        </TouchableOpacity>
      </View>
    );
  }
}

应用预览

Answer 3

我不知道您在说什么条件，但是如果您想做自己想做的事，则可以使用status值。要在显示屏幕时停用按钮，请在呈现屏幕时更改status值，或在按下按钮时更改它。这些示例附在一起。

示例

import * as React from 'react';
import { Text, View, StyleSheet,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';


export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      disabled: false
    }
  }

  componentDidMount(){
    this.setState({ disabled: true})
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <TouchableOpacity style={{width:"100%",height:20,alignItems:"center",backgroundColor:"blue"}} onPress={() => alert("touch")} disabled={this.state.disabled}>
        <Text>Touch </Text>
        </TouchableOpacity>

      <TouchableOpacity style={{width:"100%",height:20,alignItems:"center",backgroundColor:"red"}} onPress={() => this.setState({disabled:true})}>
        <Text>disabled</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 4

您可以执行的另一种方法是将您不希望使用TouchableWithoutFeedback单击的View包装起来。

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center'}}>
        <TouchableOpacity style={{backgroundColor: "blue", width: 300, height: 300}}>
          <TouchableWithoutFeedback>
            <View style={{backgroundColor: "yellow", width: 100, height: 100}}>
              <Text>Hello</Text>
            </View>
          </TouchableWithoutFeedback>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 5

正如@AnaGard 所建议的那样，在可按压容器内拥有 press free 视图的关键是制作一个没有 onPress 值的可按压内部视图。

比使用 TouchableOpacity 更好的是使用 Pressable 组件，ReactNative 的文档表明它更面向未来。

因此，此问题的更新答案可能如下：

<View>
    <Pressable
        style={{ width: 500, height: 250 }}
        onPress={() => onClose()}
    >
        <Pressable style={{ height: 100, width: 200 }}>
            <View>
                <Text>Your content here</Text>
            </View>
        </Pressable>
    </Pressable>
</View>

一些参考：

禁用嵌套视图的TouchableOpacity

5 个答案: