點擊事件傳遞到下面的對話框父組件（陣營母語）

Question

升級了我們的陣營本地項目0.20和我們所有的AlertIOS的對話正在打破。正在發生的事情是將tap事件傳遞到組件，並且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', 
    } 
}); 

下面的截圖，如果我單擊Yes或No水龍頭事件被傳送到警報下的組件。我實際上可以完全與組件交互，而在警報本身上不會觸發輕擊事件。

注：這是一個相當大的提升。我們將React從0.14撞到0.20。升級之前，一切正常。這裏發生了什麼？

Answer 1

如果我理解您的問題，竊聽是或否不會關閉該警告框，而是被下面敲擊組件。

我用你的例子，並調整了一下here。

警示框上的按鍵正常工作。一探究竟。

代碼

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