useNavigationState

useNavigationState 是一个 Hook，它可以访问包含屏幕的导航器的 导航状态。在某些情况下，您可能需要根据导航状态渲染某些内容，这时它会很有用。

警告

请将导航器的状态对象视为内部对象，它可能会在次要版本中发生更改。避免使用 导航状态 状态对象中的属性，除非您确实需要它们。如果您无法在不依赖状态对象结构的情况下实现某些功能，请提交问题。

它接受一个选择器函数作为参数。选择器将接收完整的 导航状态，并可以从状态中返回特定值。

const index = useNavigationState((state) => state.index);

选择器函数有助于减少不必要的重新渲染，因此您的屏幕只会根据您的需要进行重新渲染。如果您确实需要整个状态对象，您可以显式地执行此操作。

const state = useNavigationState((state) => state);

警告

此钩子适用于高级情况，如果您不小心，很容易引入性能问题。在大多数情况下，您不需要导航器的状态。

useNavigationState 与 navigation.getState() 有什么区别？

navigation.getState() 函数也返回当前的 导航状态。主要区别在于 useNavigationState 钩子在值更改时会触发重新渲染，而 navigation.getState() 不会。例如，以下代码将不正确

function Profile() {
  const routesLength = navigation.getState().routes.length; // Don't do this

  return <Text>Number of routes: {routesLength}</Text>;
}

在这个例子中，即使您推送了一个新屏幕，这段文本也不会更新。如果您使用钩子，它将按预期工作

function Profile() {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Text>Number of routes: {routesLength}</Text>;
}

那么什么时候使用 navigation.getState() 呢？它主要在您不关心渲染内容的事件监听器中很有用。在大多数情况下，应优先使用钩子。

与类组件一起使用

您可以将类组件包装在函数组件中以使用钩子

class Profile extends React.Component {
  render() {
    // Get it from props
    const { routesLength } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Profile {...props} routesLength={routesLength} />;
}