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의 키를 각 항목의 텍스트로 사용하면됩니다.