リアクションネイティブ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のキーを各項目のテキストとして使用できます。