React Native Stack Navigation：详情页头部如何使用导航参数

问题核心是自定义Header组件未接收到当前页面的导航上下文与参数，以下是具体修改方案：

1. 修改homeStack.js传递导航参数给Header #

在ImageDetails的navigationOptions中，接收navigation和route参数，并将其传递给自定义Header组件：

const screens = {
    Home: {
        screen: Home,
        navigationOptions:{ headerShown: false}
        
    },
    ImageDetails: {
        screen: ImageDetails,
        navigationOptions: ({ navigation, route }) => {
            return{
                 headerTitle: () => <Header navigation={navigation} route={route}/>,
            }
        }
    }
}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

2. 修改Header.js获取参数 #

通过传入的route对象直接读取参数，用可选链或默认值避免参数未定义时报错：

export default function Header({ route }) {
    const { url, explanation } = route.params || {};
    return(
       <View style={styles.descriptionBox}>
            <Text style={styles.imageDet}>图片URL：{url || '未获取到URL'}</Text>
            <Text style={styles.imageDet}>描述：{explanation || '未获取到描述'}</Text>
       </View>
    )
}

可选优化：规范跳转传参写法 #

在Home.js的跳转逻辑中，明确传递所需参数（可读性更强）：

<TouchableOpacity onPress={() => navigation.navigate('ImageDetails', { url: item.url, explanation: item.explanation })}>
    <Image 
        style={{height: 104}} 
        source={{uri:item.url}}
    />
</TouchableOpacity>

原理说明 #

之前的代码中，navigationOptions的回调函数未将当前页面的导航实例和路由信息传递给Header，导致Header内的navigation对象未定义，无法读取params。修改后通过传递navigation和route，Header就能正常访问跳转时传入的参数。

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