Question

将我们的React原生项目升级到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);

AlertIOS的点击事件将传递到对话框下面的父组件（React-native）

1 个答案: