如何在React Native中渲染前更新React Navigation头部标题？

你的场景是复用一个表单组件，通过不同标题和API区分功能，最优雅的方式是在导航时传递参数，直接在导航器配置里设置标题，完全不需要在组件内部额外处理，而且标题会在屏幕渲染前就准备好：

方案1：导航器配置中直接使用路由参数设置标题 #

在定义Stack Navigator时，给复用表单组件的options设置为一个函数，它会接收route参数，你可以直接从中取出导航时传递的标题：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      {/* 其他屏幕 */}
      <Stack.Screen
        name="ReusableForm"
        component={ReusableForm}
        // 直接从路由参数里取标题，支持默认值
        options={({ route }) => ({
          title: route.params?.title || '默认表单标题'
        })}
      />
    </Stack.Navigator>
  );
}

之后跳转到这个表单组件时，传递标题和API地址参数即可：

// 跳转到用户信息表单
navigation.navigate('ReusableForm', {
  title: '用户信息表单',
  apiEndpoint: '/api/user-form'
});

// 跳转到商品提交表单
navigation.navigate('ReusableForm', {
  title: '商品提交表单',
  apiEndpoint: '/api/product-form'
});

这种方式下，标题会在屏幕开始渲染前就被设置好，完全不会有延迟，组件内部只需要专注于使用route.params.apiEndpoint发起对应请求即可。

方案2：组件内部在渲染前设置标题（函数组件） #

如果你更倾向于在组件内部处理标题设置，可以使用React的useLayoutEffect钩子——它会在DOM更新前（也就是屏幕渲染前）执行，比useEffect和componentDidMount都早，正好匹配你的需求：

import React, { useLayoutEffect, useEffect } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { View, TextInput } from 'react-native';

function ReusableForm() {
  const navigation = useNavigation();
  const route = useRoute();
  const { title, apiEndpoint } = route.params;

  // 在UI渲染前更新导航标题
  useLayoutEffect(() => {
    navigation.setOptions({
      title: title
    });
  }, [navigation, title]); // 依赖变化时重新设置

  // 根据传递的API地址发起请求
  useEffect(() => {
    fetch(apiEndpoint)
      .then(res => res.json())
      .then(data => {
        // 处理表单初始化数据
      });
  }, [apiEndpoint]);

  return (
    <View>
      {/* 你的表单内容 */}
      <TextInput placeholder="输入内容" />
    </View>
  );
}

方案3：组件内部在渲染前设置标题（类组件） #

如果你的组件是类组件，虽然componentWillMount已被标记为UNSAFE，但如果是维护老项目，也可以用它来提前设置标题；更稳妥的方式还是优先选择方案1，不过如果一定要在组件内部处理，可以这样写：

import React from 'react';
import { View, TextInput } from 'react-native';

class ReusableForm extends React.Component {
  UNSAFE_componentWillMount() {
    const { title } = this.props.route.params;
    this.props.navigation.setOptions({
      title: title
    });
  }

  componentDidMount() {
    const { apiEndpoint } = this.props.route.params;
    // 根据API地址发起请求
    fetch(apiEndpoint)
      .then(res => res.json())
      .then(data => {
        // 处理表单初始化数据
      });
  }

  render() {
    return (
      <View>
        <TextInput placeholder="输入内容" />
      </View>
    );
  }
}

总结 #

最推荐方案1，它把导航配置和组件逻辑分离，代码更清晰，也完全避免了渲染延迟的问题，完美匹配你复用组件+提前设置标题的需求。

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