Javascript AlertIOS的点击事件传递到对话框下方的父组件（React native）

将React原生项目升级为

0.20

，所有AlertIOS对话框现在都已中断。发生的情况是，点击事件正在传递到下面的组件，并且AlertIOS上的按钮从未被触摸过

下面是一个简化的示例和屏幕截图：

class TabOption extends Component {
  constructor(props) {
    super(props);
  }

  resetData = () => {
    AlertIOS.alert('Reset Data',
      'Are you sure you want to reset your data?',
      [{text:'Yes', onPress: () => console.log('FIRE')},
       {text:'No'}])
  };

  render() {
    return(
      <View style={{flex: 1,flexDirection: 'column',backgroundColor: 'white'}}>
        <TouchableHighlight onPress={this.resetData} style={styles.tabOptionContainer}>
          <Text> Disconnect </Text>
        </TouchableHighlight>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  tabOptionContainer: {
    width:Dimensions.width,
    height:50,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'white',
  }
});

class选项卡选项扩展组件{
建造师（道具）{
超级（道具）；
}
重置数据=（）=>{
AlertIOS.alert（'重置数据'，
'确实要重置数据吗？'，
[{text:'Yes'，onPress:（）=>console.log（'FIRE'）}，
{文本：'No'}]）
};
render（）{
返回(
断开
);
};
}
const styles=StyleSheet.create({
选项卡OptionContainer：{
宽度：尺寸。宽度，
身高：50，
辩护内容：'中心'，
对齐项目：'中心'，
背景颜色：'白色'，
}
});

在下面的屏幕截图中，如果单击

Yes

或

No

，则tap事件将传递给警报下方的组件。实际上，我可以与组件完全交互，而警报本身不会触发tap事件

---

注意：这是一次相当大的升级。我们的反应从

0.14

猛增到

0.20

。升级之前，一切正常。这是怎么回事？

如果我理解您的问题，点击“是”或“否”不会关闭警报框，而是点击下面的组件

我用了你的例子，对它做了一些调整

警报箱上的水龙头工作正常。看看吧

代码

var React = require('react-native');
var {
  AlertIOS,
  AppRegistry,
  Dimensions,
  StyleSheet,
  TouchableHighlight,
  Component,
  Text,
  View,
} = React;

class StackOverflowApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'pink'
    };
  }

  resetData = () => {
    AlertIOS.alert('Reset Data',
      'Are you sure you want to reset your data?',
      [{text:'Yes', onPress: () => this.setState({color: 'red'})},
       {text:'No', onPress: () => this.setState({color: 'blue'})}])
  };

  render() {
    return(
      <View style={{flex: 1,flexDirection: 'column',backgroundColor: this.state.color}}>
        <TouchableHighlight onPress={this.resetData} style={styles.tabOptionContainer}>
          <Text> Disconnect </Text>
        </TouchableHighlight>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  tabOptionContainer: {
    width:Dimensions.width,
    height:50,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'white',
  }
});

AppRegistry.registerComponent('StackOverflowApp', () => StackOverflowApp);

var React=require（'React-native'）；
变量{
AlertIOS，
评估学，
尺寸，
样式表，
触控高光，
组成部分，
文本，
看法
}=反应；
类StackOverflowApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：“粉色”
};
}
重置数据=（）=>{
AlertIOS.alert（'重置数据'，
'确实要重置数据吗？'，
[{text:'Yes'，onPress:（）=>this.setState（{color:'red'}}），
{text:'No'，onPress:（）=>this.setState（{color:'blue'}）}]）
};
render（）{
返回(
断开
);
};
}
const styles=StyleSheet.create({
选项卡OptionContainer：{
宽度：尺寸。宽度，
身高：50，
辩护内容：'中心'，
对齐项目：'中心'，
背景颜色：'白色'，
}
});
AppRegistry.registerComponent（'StackOverflowApp'，（）=>StackOverflowApp）；

Hey@GHamaide我很感谢你花时间回复，但我很困惑这是如何解决这个问题的？我知道你有一个可以工作的组件，在我们的情况下它通常也可以工作，所以你能解释一下这将如何为我们解决触摸事件问题吗？我的观点主要是告诉你，错误不是来自你给我们的代码，而是来自其他东西。你的代码复制工作正常。好的，谢谢。我不确定这是否符合“答案”，因为它为原始问题提供了解决方案。不过，当我找到一个解决方案时，我会在这里发布一个解决方案（到目前为止，我们刚刚重建了应用程序）。好的，我会把它留给评论，但我同意，它应该是一个评论。我的错。