无论如何都可以在不调用 setParams (react-navigation) 的情况下重新渲染导航栏？

Question

我正在为我的应用程序实现多语言功能，但在更改反应导航标题标题时遇到了困难（使用反应导航）。我不想在每个屏幕中调用 setParams 来根据所选语言更改标题。

这是我的堆栈：

Home -> Settings -> App Settings -> Language Settings.

我在Language Setting 屏幕上选择语言。按导航栏上的默认返回按钮返回后，App Settings 屏幕中的static navigationOptions 被调用（这是我根据当前语言设置标题的地方）即使我不调用 setParams()，我不知道为什么它没有重新渲染 => 标题没有改变。

有没有办法解决这个问题？

---

嗨@JavaEvgan 这是我的代码：

    <AppNavigator navigation={addNavigationHelpers({
      dispatch: this.props.dispatch,
      state: this.props.navigationState
    })}/>

连接到 redux 商店

export default connect(state => ({
  navigationState: state.navigationState,
}), dispatch => ({
  dispatch: dispatch
}))(MainLayoutContainer)

Answer 1

我找到了解决方案，使用 screenProps 将额外的信息传递给孩子 https://reactnavigation.org/docs/navigators/stack#Navigator-Props

    <AppNavigator
      screenProps={this.props.settings}
      navigation={addNavigationHelpers({
      dispatch: this.props.dispatch,
      state: this.props.navigationState
    })}/>

并将其连接到 redux 商店

export default connect(state => ({
  settings: state.settings,
  navigationState: state.navigationState,
}), dispatch => ({
  dispatch: dispatch
}))(MainLayoutContainer)

像这样，static navigationOptions 每次更改商店设置时都会被调用并重新渲染

Answer 2

刚刚从原始文档中为您找到了一个解决方案，而且非常简单。您只需为不同的语言版本和一个父组件创建两个（或更多）导航组件。在父组件中，您将需要使用“条件渲染”（if 语句）并根据您的状态返回正确的导航。查看条件渲染的原始文档：

ReactJS docs - Conditional rendering

来自文档：

考虑这两个组件：

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

我们将创建一个 Greeting 组件，根据用户是否登录来显示这些组件中的任何一个：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
  return <UserGreeting />;
}
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

Try it on CodePen.

此示例根据 prop 中 isLoggedIn 的值呈现不同的问候语