时间戳

首页 > 解决方案 > React-native-elements Overlay 忽略了 TouchableOpacity onPress 函数

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

问题描述

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

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

标签： react-nativebuttonoverlaytouchableopacityreact-native-elements

解决方案

对我来说，给zIndex按钮的容器一个按钮就可以了。在我们的项目中，我们有一些交互视频，其中交互按钮出现在VideoPlayer. 对于那些交互选项，我使用了一个模糊的 Viewposition: 'absolute'和一个像zIndex: 30. 在这个视图中，我刚刚添加了我TouchableOpacity的 s - 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>

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

推荐阅读