Question

我正在为我的应用程序实现多语言功能，但我不得不改变反应导航标题标题（使用react-navigation）。我不想在每个屏幕上调用setParams来根据所选语言更改标题标题。

这是我的堆栈：

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

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

无论如何都有解决这个问题的方法吗？

你好@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

来自docs：

考虑以下两个组成部分：

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的值呈现不同的问候语

无论如何重新渲染导航栏而不调用setParams（react-navigation）？

2 个答案: