React-Native DraweNavigator Lokalisierung/Übersetzung

Question

Ich experimentiere zuletzt mit RN, und es scheint als eine ziemlich nette Alternative zur nativen Entwicklung.

Aber jetzt bin ich mit ziemlich dummes Problem fest: Lokalisierung. Ich benutze diese Bibliothek: ReactNativeLocalization.

Es ist ziemlich einfach, und ich nahm es in alle meine Bildschirme. Ich verwende es in Kombination mit AsyncStorage, da ich einen Bildschirm habe, auf dem der Benutzer die In-App-Sprache unabhängig vom Gerät ändern kann. Jetzt ist das Problem, wie man die Titel meines DrawerNavigators aktualisiert? Hier

ist auch, wie meine Navigation & Stapel konfiguriert sind (man beachte ich die Sprache innerhalb Einstellungen ändern):

/** 
* 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

Sie scheinen Ihre eigene Komponente für die Schublade zu verwenden, die Sie in DrawerConfig verwenden . Da Sie die volle Kontrolle über Ihre DrawerItems haben, können Sie einfach Ihre LocalizedStrings an sie weitergeben, und verwenden Sie einen Schlüssel aus der LocalizedStrings als Text in jedem Element.