React-native-elements覆盖忽略TouchableOpacity onPress函数

Question

我在Overaly form react- TouchableOpacity -elements中放置了两个反应原生按钮，当我单击它们时什么也不会发生。

不覆盖其中的支持按钮吗？在文档的覆盖按钮中没有提到。

import { Overlay } from 'react-native-elements';

toggleOverlay = () => {
     this.setState({isVisible: !this.state.isVisible});
};

                <Overlay
                    isVisible={this.state.isVisible}
                    onBackdropPress={this.toggleOverlay}
                    height="82%"
                    width= "95%"
                >

                    <View style={styles.contenedor_Botones}>

                        <View style={styles.botones_Principales}>

                            <TouchableOpacity style={styles.boton_Principal}
                                onPress={() => {
                                    this.toggleOverlay();
                                }}
                            >
                                <Text style={styles.texto_Boton}>
                                    METEREOLOGÍA
                                </Text>
                            </TouchableOpacity>

                            <TouchableOpacity style={styles.boton_Principal}
                                onPress={() => {
                                    alert("auwydau");
                                }}>
                                <Text style={styles.texto_Boton}>
                                    INFORMACIÓN ADICIONAL
                                </Text>
                            </TouchableOpacity>

                        </View>

                    </View>

                </Overlay>

当我按下这些按钮时，我想打开一个新的覆盖。谢谢你的hepl！

Answer 1

我也有同样的问题，只有安卓。

我用import { TouchableOpacity } from 'react-native'解决了这个问题。

在我使用import { TouchableOpacity } from 'react-native-gesture-handler'之前。

Answer 2

对我来说，给我的按钮容器一个zIndex就行了。在我们的项目中，我们有一些互动视频，互动按钮出现在VideoPlayer上。对于这些交互选项，我使用了一个带有position: 'absolute'的模糊视图和一个像zIndex: 30这样的大zIndex。在这个视图中，我刚刚添加了我的TouchableOpacitys - et voilà：

<View
    style={{
      position: 'absolute',
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-end',
      paddingBottom: 50,
      bottom: 0,
      zIndex: 30,
      minHeight: Dimensions.get('window').height,
      width: Dimensions.get('window').width,
      backgroundColor: theme.colors.white_blur[3],
      display: 'flex',
    }}>
    {/* {interactions.map(item => {
      
    })} */}

    <TouchableOpacity
      onPress={() => {
        console.log('Auswahl 1..');
      }}
      style={styles.interactions}>
      <Text style={styles.interactions_text}>My interaction Btn 1</Text>
    </TouchableOpacity>
    <TouchableOpacity
      style={styles.interactions}
      onPress={() => {
        console.log('Auswahl 2..');
      }}>
      <Text style={styles.interactions_text}>
        My interaction Btn 2
      </Text>
    </TouchableOpacity>
  </View>

如果任何人仍然需要帮助，只需在您的代码片段中留下评论，我将看看我能做些什么。