React-native-elements Overlay 忽略了 TouchableOpacity onPress 函数答案

【问题标题】：React-native-elements Overlay ignores TouchableOpacity onPress functionReact-native-elements Overlay 忽略了 TouchableOpacity onPress 函数
【发布时间】：2020-03-11 09:27:39
【问题描述】：

我在 Overaly 表单 react-native-elements 中放置了两个 TouchableOpacity 按钮，当我点击它们时，什么也没有发生。

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

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>

当我按下这些按钮时，我想打开一个新的叠加层。感谢您的帮助！

【问题讨论】：

您找到解决方案了吗？
@schingeldi 不，我只是用

标签： react-native button overlay touchableopacity react-native-elements

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

如果还有人需要帮助，请在您的代码 sn-p 中留下评论，我会看看我能做什么。

【讨论】：