React Native页面底部按钮无法点击问题求助

问题根源 #

你的示例代码中最外层<View>未设置flex:1，导致子元素的百分比高度无法基于屏幕高度正确计算。父容器高度由内部内容撑开，底部占10%高度的View实际并未获得预期的屏幕占比，按钮的可点击区域被父容器的边界截断，只有边缘区域处于有效点击范围内。

修复方案 #

给最外层View添加flex:1样式，让它占满整个屏幕高度，子元素的百分比高度就能基于父容器（屏幕）正确计算：

import React from "react";
import {Text,View,Button} from 'react-native';

export default class TestButtonScreen extends React.Component{
    constructor(props){
        super(props);
    }

    TestButton=(event)=>{
        console.log("testbutton");
    }

    render(){
        return (
            <View style={{flex:1}}> {/* 新增flex:1 */}
                <View style={{height:'90%' }}>
                    <Text> top of view</Text>
                </View>
                <View style={{height: '10%', paddingTop:10}}>
                    <Button onPress={this.TestButton} title="test button" />
                </View>
            </View>
        );
    }
}

额外排查点 #

如果修复后仍有问题，可检查以下内容：

• 页面中是否存在绝对定位的元素（如position:'absolute'）覆盖在按钮上方，遮挡了点击区域
• 若使用ScrollView，是否设置了contentInset或paddingBottom导致底部区域被挤压
• 检查按钮父容器的overflow属性是否设置为hidden，意外截断了按钮的点击区域

内容的提问来源于stack exchange，提问作者James