React Native Overlay子组件onPress页面导航失效问题求助

在Overlay中展示Home组件时，组件内的页面跳转链接无法触发导航功能，但Home组件单独使用时功能正常。

相关代码 #

Overlay使用代码 #

<Overlay
  overlayStyle={{width:'100%',height:'70%'}}
  fullScreen={false}
  isVisible={overlayVisible}
  onBackdropPress={toggleOverlay}
>
  <Home
    navigation={navigation}
    lang={lang}
    headerVisible={false}
  ></Home>
</Overlay>  

Home组件核心代码片段 #

const Home = ( {navigation, lang, headerVisible}) => {
  const [language,setLang]=useState(lang);
  const [index, setIndex] = React.useState(0);

return (
  <ScrollView
    contentInsetAdjustmentBehavior="automatic"
    style={backgroundStyle}>
    <View style={{width: '50%'}}>
      {
       langBooks.get(language)?.slice(0,39).map((item, index) => {
         return (
           <Text
             key={index}
             onPress={()=>navigation.navigate("Book",{'book':index, 'chapter':0,language})}
           >{item } -  {chapters[index]}</Text>;
      })}
    </View>
  </ScrollView>
);

• 解除Overlay的事件拦截：多数Overlay组件会默认拦截内部触摸事件，添加pointerEvents="box-none"属性让事件穿透到内部组件：

<Overlay
  overlayStyle={{width:'100%',height:'70%'}}
  fullScreen={false}
  isVisible={overlayVisible}
  onBackdropPress={toggleOverlay}
  pointerEvents="box-none"
>
  <Home
    navigation={navigation}
    lang={lang}
    headerVisible={false}
  ></Home>
</Overlay>

• 改用useNavigation钩子获取导航对象：避免props传递navigation时的上下文丢失，直接在Home组件内用钩子获取：

import { useNavigation } from '@react-navigation/native';

const Home = ( {lang, headerVisible}) => {
  const navigation = useNavigation();
  const [language,setLang]=useState(lang);
  const [index, setIndex] = React.useState(0);

// 后续渲染逻辑不变
};

调用Home时无需再传递navigation：

<Overlay
  // 其他属性保留
>
  <Home
    lang={lang}
    headerVisible={false}
  ></Home>
</Overlay>

• 调整Overlay层级：若层级问题导致内部元素无法交互，可在overlayStyle中设置z-index确保组件处于可点击层级：

<Overlay
  overlayStyle={{width:'100%',height:'70%', zIndex: 1000}}
  // 其他属性保留
>
  {/* Home组件 */}
</Overlay>

• 替换循环中的key值：使用index作为key可能引发渲染异常，改用item的唯一标识（如item.id）：

{
 langBooks.get(language)?.slice(0,39).map((item, index) => {
   return (
     <Text
       key={item.id} // 替换为item实际的唯一属性
       onPress={()=>navigation.navigate("Book",{'book':index, 'chapter':0,language})}
     >{item } -  {chapters[index]}</Text>;
 })}

内容的提问来源于stack exchange，提问作者javapedia.net