禁用嵌套视图的TouchableOpacity

Question

我有一个可触摸的不透明度，并且我在它里面有一些视图。我有一个特定的视图，我不想让它被点击。我如何才能做到这一点？

Answer 1

您不想让它可单击的特定视图应该是"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 2

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

<View pointerEvents="none" />

请参考here

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>
    );
  }
}