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中的一個鍵作爲每個項目中的文本。