Expo SDK52升级后iOS端导航栏组件onPress事件失效求助

问题描述 #

升级至Expo SDK52后，iOS设备上导航栏按钮、Pressable及TouchableOpacity组件无法正常响应点击事件，此前iOS和Android端均运行正常。使用iPhone 7（iOS 15.8.3）测试时，需点击约10次才可能触发一次onPress事件。

相关依赖（package.json） #

{
  "name": "qr_logistics",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/prebuild-config": "~8.0.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@shopify/flash-list": "^1.7.1",
    "axios": "^1.7.2",
    "babel-plugin-module-resolver": "^5.0.2",
    "base-64": "^1.0.0",
    "create-react-class": "^15.7.0",
    "crypto-js": "^4.1.1",
    "eas-cli": "^0.49.0",
    "expo": "^52.0.7",
    "expo-barcode-scanner": "~13.0.1",
    "expo-build-properties": "^0.13.1",
    "expo-camera": "~16.0.5",
    "expo-checkbox": "~4.0.0",
    "expo-constants": "~17.0.3",
    "expo-image-picker": "~16.0.2",
    "expo-linking": "~7.0.2",
    "expo-localization": "~16.0.0",
    "expo-location": "~18.0.1",
    "expo-secure-store": "~14.0.0",
    "expo-sqlite": "~15.0.3",
    "expo-status-bar": "~2.0.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "project-can-json": "^1.0.1",
    "project-react-accordion": "^1.0.4",
    "project-react-mvc": "^1.6.0",
    "project-rest-client": "^1.3.3",
    "react": "^18.3.1",
    "react-native": "^0.76.2",
    "react-native-check-version": "^1.1.1",
    "react-native-device-info": "^10.13.1",
    "react-native-dotenv": "^3.4.9",
    "react-native-fetch-api": "^3.0.0",
    "react-native-get-random-values": "~1.11.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-reanimated": "~3.16.1",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "~4.1.0",
    "react-native-sse": "^1.2.1",
    "react-native-store-version": "^1.4.1",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-webview": "^13.12.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

相关代码片段 #

let NavigationContent = () => <Text>sisu</Text>;
let btn = <Pressable style={{borderWidth: 1}} onPress={() => {
    alert('sa');
    //this.props.navigation.goBack()
}}>
    <Text>tagasi</Text>
</Pressable>;

let ScreenOptions = {
    headerStyle: {},
    orientation: 'all',
    headerShown: false,
    presentation: 'card',
    animationTypeForReplace: 'push',
    animation: 'fade_from_bottom',
};
let NavigationOptions = ({navigation, route}) => {
    return {
        ...ScreenOptions, ...{
            headerBackTitle: null,
            headerTitle: props => null,
            //if header back button not needed then set to null
            headerLeft: props => btn,
            //if header right not needed then set to null
            headerRight: props => btn,
            tabBarVisible: false,
            headerShown: true,
            headerReloadOnFocus: true
        }
    };
};

return (
    <NavigationContainer role="navigation">
        <Stack.Navigator initialRouteName="HomeScreen">
            <Stack.Screen name="HomeScreen" component={NavigationContent} options={NavigationOptions} listeners={({navigation, route}) => ({
                focus: (e) => {
                    global.navigationRoute = route;
                },
            })}/>
        </Stack.Navigator>
    </NavigationContainer>
);

解决方案 #

该问题是Expo SDK52升级后，iOS端视图层级或触摸事件处理出现的兼容性问题，可尝试以下修复方案：

• 将按钮组件移至导航options内部定义：避免在外部固定定义Pressable组件导致的实例复用问题，确保每次渲染导航栏时生成新的组件实例，修复触摸事件绑定异常。修改后的代码如下：

let NavigationOptions = ({navigation, route}) => {
    // 将按钮定义移至函数内部
    let btn = <Pressable style={{borderWidth: 1}} onPress={() => {
        alert('sa');
        //navigation.goBack()
    }}>
        <Text>tagasi</Text>
    </Pressable>;
    
    return {
        ...ScreenOptions, ...{
            headerBackTitle: null,
            headerTitle: props => null,
            headerLeft: props => btn,
            headerRight: props => btn,
            tabBarVisible: false,
            headerShown: true,
            headerReloadOnFocus: true
        }
    };
};

• 升级react-native-screens版本：当前使用的react-native-screens版本为~4.1.0，可升级至SDK52兼容的更高版本（如~4.4.0），新版本修复了部分触摸事件处理逻辑问题。

• 排查视图层级遮挡：临时给导航栏按钮添加背景色，确认是否存在透明视图或层级更高的组件遮挡了点击区域。

该问题主要集中在iOS老版本（如iOS15）与SDK52的组合场景，上述方案可有效解决大部分案例中的点击无响应问题。

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