使用react-native-navigation时屏幕无交互，按钮点击失效该如何解决？

嘿，我之前也踩过这个坑！你的代码里有个非常容易忽略的细节问题，导致按钮看起来显示正常但完全无法交互：根View没有设置flex布局。

在React Native中，默认情况下View的flex属性是0，这意味着你的<View>只会包裹按钮的大小，而不会占满整个屏幕。虽然按钮看起来在屏幕上，但实际可点击的区域可能因为布局问题没有被正确识别，触摸事件根本传递不到按钮上。

修改后的WelcomeScreen代码： #

import React, {Component} from 'react'
import {Button, View, StyleSheet} from 'react-native'

type Props = {};
export default class WelcomeScreen extends Component<Props> {
  handleClick = () => {
    console.log('Button Clicked')
  }
  render() {
    return (
      <View style={styles.container}>
        <Button title="Click" onPress={this.handleClick} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // 关键：让根View占满整个屏幕
    justifyContent: 'center', // 可选：让按钮垂直居中
    alignItems: 'center' // 可选：让按钮水平居中
  }
})

额外排查点（如果上面的修改没解决问题）： #

• 确认你的react-native-navigation版本和代码适配：如果是v7及以上版本，注册组件的方式是正确的，但可以尝试用withNavigation高阶组件包裹你的屏幕组件（不过通常布局问题是最常见的原因）。
• 检查是否有其他层级的View覆盖了按钮：比如有没有透明的View在按钮上层拦截了触摸事件。

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