React Native中Stack Screen配置的options属性未定义问题

问题根源 #

你混淆了options属性的作用，它是专门用来配置导航栏样式、交互等导航相关配置的，你写在options里的自定义字段不会传递给屏幕组件，所以在Memory组件的props中无法读取到你定义的description字段。

解决方案 #

根据你的使用场景选对应方案即可：

• 若需要给屏幕传递静态固定参数，使用initialParams属性，修改对应Screen的配置：

<MemoriesStack.Screen 
  name="memory" 
  component={Memory} 
  initialParams={{ description: 'this should be defined' }}
/>

参数会存在组件props的route.params字段中，在Memory组件内读取方式如下：

const Memory = (props) => {
  const description = props.route.params?.description;
  // 即可拿到自定义的description值
}

• 若需要跳转时传递动态参数（比如你当前点击图片需要传递对应的图片url），修改跳转逻辑即可：

function memoryTap(url){
  // 跳转时携带参数
  navigation.navigate('memory', { url: url, description: '自定义描述' });
}

同样在props.route.params中读取对应参数即可，也能解决你当前Memory组件内url变量未定义导致的图片加载报错问题。

额外注意：你原本在options中手动传递navigation完全没有必要，所有路由屏幕组件的props默认自带navigation属性，可直接读取使用。

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