React-Native DraweNavigator 本地化/翻译

Question

我最后正在尝试使用 RN，它似乎是原生开发的一个非常简洁的替代方案。

但是，现在我遇到了一个非常愚蠢的问题：本地化。我正在使用这个库：ReactNativeLocalization。

这很简单，我在所有屏幕上都采用了它。我将它与 AsyncStorage 结合使用，因为我有一个屏幕，用户可以在其中更改独立于设备的应用内语言。现在的问题是，如何更新我的 DrawerNavigator 的标题？

这也是我的导航和堆栈的配置方式（注意我在设置中更改了语言）：

/**
 * React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView
} from 'react-native';
import { StackNavigator, TabNavigator, DrawerNavigator, DrawerItems } from 'react-navigation'
var Home = require('./Home')
var Info = require('./Info')
var Settings = require('./Settings')
var Help = require('./Help')
var Groups = require('./Groups')
var Details = require('./Details')

export default class Stryn extends Component {
  render() {
    return (
      <View/>
    );
  }
}

const styles = StyleSheet.create({
  menu_icon: {
    width: 24,
    height: 24,
    tintColor: 'rgba(255,255,255,0.7)'
  },
  menu_container: {
    flex: 1,
    backgroundColor: 'rgba(112,98,89,1)'
  },
  menu_title: {
    paddingTop: 50,
    backgroundColor: 'transparent',
    textAlign: 'center',
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  }
})

const Stack = {
    Home: {
        screen: Home
    },
  Info: {
    screen: Info
  },
  Settings: {
    screen: Settings
  },
  Help: {
    screen: Help
  },
  Groups: {
    screen: Groups
  },
  Details: {
    screen: Details
  }
};

const DrawerRoutes = {
    FirstViewStack: {
        name: 'FirstViewStack',
        screen: StackNavigator(Stack, { initialRouteName: 'Home' }),
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: ({ tintColor }) => (
        <Image
          source={require('./static/img/home.png')}
          style={[styles.menu_icon]}
        />
      ),
    },
    },
  SecondViewStack: {
        name: 'SecondViewStack',
        screen: StackNavigator(Stack, { initialRouteName: 'Info' }),
    navigationOptions: {
      drawerLabel: 'Info',
      drawerIcon: ({ tintColor }) => (
        <Image
          source={require('./static/img/information.png')}
          style={[styles.menu_icon]}
        />
      ),
    },
    },
  ThirdViewStack: {
        name: 'ThirdViewStack',
        screen: StackNavigator(Stack, { initialRouteName: 'Settings' }),
    navigationOptions: {
      drawerLabel: 'Settings',
      drawerIcon: ({ tintColor }) => (
        <Image
          source={require('./static/img/settings.png')}
          style={[styles.menu_icon]}
        />
      ),
    },
    },
};

const DrawerConfig = {
  contentComponent: props =>
    <View style={styles.menu_container}>
      <Text style={styles.menu_title}>Stryn</Text>
      <ScrollView style={{backgroundColor:'rgba(112,98,89,1)'}}>
        <DrawerItems {...props} labelStyle={{color:'rgba(255,255,255,0.7)'}} />
      </ScrollView>
    </View>,
  drawerPosition: 'left',
}

const RootNavigator =
    StackNavigator({
        Drawer: {
            name: 'Drawer',
            screen: DrawerNavigator(
                DrawerRoutes,
        DrawerConfig
            ),
        },
        ...Stack
    },
        {
            headerMode: 'none'
        }
    );

AppRegistry.registerComponent('Stryn', () => RootNavigator);

Answer 1

您似乎使用自己的抽屉组件，您在DrawerConfig 中使用。由于您可以完全控制您的DrawerItems，因此您只需将您的LocalizedStrings 传递给他们，并使用LocalizedStrings 中的密钥作为每个项目中的文本。

附录

cmets 询问如何在初次唤醒后更新语言，或者一般如何更新菜单。嗯，这取决于您将当前语言保存在哪里，以及如何将其传递给抽屉组件。

例如，您可以将语言保存在 Redux 存储（或其他一些状态保存机制）中，然后使用 screenProps 将其传递给根导航器。这样组件就可以从其 props 中读取语言并调用正确的翻译。有关screenProps 的更多信息，请参阅here。