使用钩子以编程方式更新功能组件中的反应导航标题标题答案

【问题标题】：Programmatically update react navigation header title in functional component with hooks使用钩子以编程方式更新功能组件中的反应导航标题标题
【发布时间】：2019-06-13 20:38:46
【问题描述】：

关于反应导航 setParams() 的问题。我问了 Reactiflux，但没有人回应。我正在尝试在功能组件中以编程方式设置标题。

从另一个 Stack Overflow 线程，追溯更新静态标题，如下所示：

const Comp = props => { ... };

Comp.navigationOptions = ({ navigation }) => ({
  title: 'Static Title'
});

但我需要从组件内部访问组件状态，这不起作用：

const Comp =({ navigation }) => {
 const [title, setTitle] = useState('');

 useEffect(() => {
     navigation.setParams({ title });
 }, [title]);

 return ( ... );
}

如果setParams()方法不对，请赐教

编辑：补充一点，当我 console.log(navigation) 时，我可以看到它正在将 navigation.state.params.title 更改为正确的字符串，但是它没有显示为标题。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您需要获取标题参数并将其应用于标题：

Comp.navigationOptions = ({ navigation }) => ({
  title: navigation.getParam('title', /* your default title */)
});

【讨论】：

这行得通，谢谢。为了让任何找到此线程的人清楚，我仍然需要在组件中使用setParams() 来实际设置标题，然后getParams() 可以稍后找到该标题
我这样写过 ProductDetails.navigationOptions = ({ navigation }) => ({ title: "Static Title" });导出默认 ProductDetails；但它仍然无法正常工作。需要任何额外的配置
在我遇到这个之前花了 2-3 个小时......非常感谢！完美运行。

【解决方案2】：

首先，您需要将导航选项实现为函数，并且该函数需要导航参数，如下行示例所示：

const cameraScreenNavigator = {
 '/auth/controlledCameraScreen': {
 screen: ControlledCameraScreen,
 navigationOptions: ({navigation}) => ({
 title: navigation?.getParam('title', "Başvuru Adı"),
 headerStyle: style.navigationHeaderBlue,
 headerTitleStyle: {
   fontWeight: 'bold',
   color: COLORS.primaryText
    },
  }),
 }
}

然后你可以在你的组件中调用 setParams 函数。此函数充当 setState 但 react-nativagion 建议这样做 setParams "setParams/setOptions 等只能在 useEffect/useLayoutEffect/componentDidMount/componentDidUpdate 等中调用。不能在渲染期间或在构造函数中调用。"
```
props.navigation.setParams({title: "New Title"})
```

资源：https://reactnavigation.org/docs/stack-navigator/

【讨论】：