React Native中如何在屏幕内动态设置React Navigation标题

这个场景我太熟啦！之前做项目也遇到过一模一样的问题——不想每次导航都传标题，又因为navigationOptions是静态的，没法直接用异步的AsyncStorage来设置。其实React Navigation早就提供了完美的解决方案，直接用动态更新导航选项的方法就行，分两种组件类型给你详细说：

函数组件方案（推荐，现在React Native项目大多用函数组件） #

用useEffect钩子配合navigation.setOptions方法，在组件挂载后异步读取AsyncStorage，然后动态设置标题：

import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

const TargetScreen = () => {
  // 获取navigation对象
  const navigation = useNavigation();

  useEffect(() => {
    // 异步读取并设置标题的函数
    const fetchAndSetTitle = async () => {
      // 从AsyncStorage获取存储的标题
      const storedTitle = await AsyncStorage.getItem('screenTitle');
      // 动态设置导航标题，有存储值就用存储值，没有就用默认标题
      navigation.setOptions({
        title: storedTitle || '默认标题'
      });
    };

    // 调用函数
    fetchAndSetTitle();
  }, [navigation]); // 依赖navigation，确保它变化时重新执行

  return (
    // 这里写你的屏幕内容
  );
};

类组件方案 #

如果你的项目还在用类组件，就用componentDidMount生命周期方法来做同样的事：

import React, { Component } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

class TargetScreen extends Component {
  componentDidMount() {
    // 组件挂载后执行异步操作
    this.fetchAndSetTitle();
  }

  fetchAndSetTitle = async () => {
    const storedTitle = await AsyncStorage.getItem('screenTitle');
    // 通过props拿到navigation，调用setOptions设置标题
    this.props.navigation.setOptions({
      title: storedTitle || '默认标题'
    });
  };

  render() {
    return (
      // 这里写你的屏幕内容
    );
  }
}

额外说明 #

• 不管从哪个屏幕导航到这个页面，只要组件挂载，就会自动读取AsyncStorage并设置标题，完全不用每次导航传参。
• 如果你的标题可能在应用运行过程中被修改（比如用户在其他页面更新了存储的标题），可以监听AsyncStorage的变化，或者结合状态管理工具（比如Redux、Context），当标题变化时重新调用navigation.setOptions来更新导航栏标题。

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