无法在 React Native 中单击页面底部的按钮答案

【问题标题】：Cannot click button at bottom of page in React Native无法在 React Native 中单击页面底部的按钮
【发布时间】：2022-11-11 04:49:58
【问题描述】：

我无法单击页面底部的按钮或可触摸的不透明度。我们必须将其移动到页面顶部或更高。

这是一个例子

import React, { useRef, createRef,useEffect } from "react";

import {ScrollView,Text,View,Image,Dimensions,StyleSheet,Animated, TouchableOpacity, BackHandler,Button} from 'react-native';

export default class TestButtonScreen extends React.Component{

    constructor(props){
        super(props);
    }

    render(){

        const TestButton=(event,id)=>{
                console.log("testbutton");

            }
            let deviceWidth = Dimensions.get('window').width;
            let deviceHeight = Dimensions.get('window').height;

        return (

                        <View>

                            <View style={{height:'90%' }}>
                            <Text> top of view</Text>
                            </View>
                            <View style={{height: '10%' , paddingTop:10, marginTop: 0}}>

                           <Button
                                                          onPress={(event) => TestButton(event)} title="test button">
                                                    </Button>
                            </View>
                        </View>
            );
    }
}

我尝试了不同的方法，例如：

可触摸不透明度
可压
按钮
使用 onStartShouldSetResponder={() => {console.log('Clicked')}} 使视图可点击
z 索引。我使按钮的索引比屏幕上的其他组件高

一切似乎都有相同的效果。除非我单击按钮的最左侧或右侧边缘，否则单击页面底部不会注册该按钮。

我正在使用 React Native 0.68.2。这似乎发生在 android studio 模拟器和真实设备中。

【问题讨论】：

标签： react-native touchableopacity

【解决方案1】：

我们确实想通了。看来我们的网络提供商实用程序正在干扰渲染的组件。

这个库： import { useNetInfo } from '@react-native-community/netinfo';

当网络连接不可用时，我们会出现一些。尽管我们与网络的连接已经建立，但它仍然阻碍了它出现的按钮。

【讨论】：