iOS 上 React Navigation 中 "Back" 文本的 i18n 翻译

Question

我在 React Native 应用程序中使用 React Navigation 和 StackNavigator。我可以翻译 navigationOptions.title，但是，在 iOS 上，如果 header 中的文本太多，它默认在后退按钮旁边显示文本 "Back" .我不介意这一点，但我希望它用我当前的语言说 "Back"。我怎样才能做到这一点？我正在谈论的文字：

我现在如何使用 navigationOptions 的示例：

class Example extends Component<Props> {
    static navigationOptions = () => ({
        title: i18n.t('example_title'),
    });
    // ...
}

如果相关，我们使用 react-native-localize with i18n-js 来实现 i18n 功能。我不希望它总是说出以前的屏幕名称，或者总是返回，我希望它像现在一样动态，只需使用 i18n。

Answer 1

在我的 Main AppStack createStackNavigator 应用程序中，您将所有屏幕组合在一起，我添加了第二个参数一个对象，我们在其中给它一个键

    createStackNavigator({
       ...screens
    },

    {
       defaultNavigationOptions: { 
          headerBackTitle: i18n.t('example_title')
       }
    })

这会将“后退”按钮设置为整个应用程序的当前语言。

Answer 2

navigationOptions 对象有一个名为 headerTruncatedBackTitle 的键。

Title string used by the back button when headerBackTitle doesn't fit on the screen. "Back" by default. headerTruncatedBackTitle has to be defined in the origin screen, not in the destination screen.

例如，您可以通过以下操作将其与 i18n 一起使用：

class Example extends Component<Props> {
    static navigationOptions = () => ({
        title: i18n.t('example_title'),
        headerTruncatedBackTitle: i18n.t('example_back'), // "Back", "Zurück", etc.
    });
    // ...
}

iOS 上 React Navigation 中 "Back" 文本的 i18n 翻译

i18n translation for "Back"-text in React Navigation on iOS

internationalization

react-native

react-navigation