React native 对本地化/翻译作出反应

最后我用RN进行了实验，它似乎是本地开发的一个非常好的替代方案

然而，现在我陷入了一个相当愚蠢的问题：本地化。我正在使用此库：

它非常简单，我在所有的屏幕上都采用了它。我将它与AsyncStorage结合使用，因为我有一个屏幕，用户可以在屏幕上独立于设备更改应用程序语言。现在的问题是，如何更新我的抽屉管理员的标题？

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

/**
*反应本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
进口{
评估学，
样式表，
文本，
看法
形象,，
卷轴视图
}从“反应本机”；
从“react navigation”导入{StackNavigator、TabNavigator、DrumerNavigator、DrumerItems}
var Home=require（“./Home”）
变量信息=需要（“./Info”）
变量设置=需要（“./Settings”）
var Help=require（“./Help”）
变量组=需要（“./Groups”）
变量详细信息=要求（“./Details”）
导出默认类Stryn扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
菜单图标：{
宽度：24，
身高：24，
tintColor:'rgba（255255,0.7）'
},
菜单容器：{
弹性：1，
背景颜色：“rgba（112,98,89,1）”
},
菜单标题：{
paddingTop:50，
背景色：“透明”，
textAlign:'中心'，
颜色：'白色'，
fontWeight:'粗体'，
尺寸：20，
}
})
常量堆栈={
主页：{
屏幕：主页
},
信息：{
屏幕：信息
},
设置：{
屏幕：设置
},
帮助：{
屏幕：帮助
},
小组：{
屏幕：组
},
详情：{
屏幕：详细信息
}
};
常数抽屉={
FirstViewStack：{
名称：“FirstViewStack”，
屏幕：StackNavigator（堆栈，{initialRouteName:'Home'}），
导航选项：{
抽屉标签：“家”，
抽屉图标：（{tintColor}）=>(
),
},
},
第二视图堆栈：{
名称：“SecondViewStack”，
屏幕：StackNavigator（堆栈，{initialRouteName:'Info'}），
导航选项：{
抽屉标签：“信息”，
抽屉图标：（{tintColor}）=>(
),
},
},
第三批：{
名称：“ThirdViewStack”，
屏幕：StackNavigator（堆栈，{initialRouteName:'Settings'}），
导航选项：{
抽屉标签：“设置”，
抽屉图标：（{tintColor}）=>(
),
},
},
};
常数抽屉配置={
contentComponent:props=>
斯特林
,
抽屉位置：'左'，
}
常量根导航器=
StackNavigator({
出票人：{
姓名：'抽屉'，
屏幕：抽屉式显示器(
抽屉，
付款人配置
),
},
堆栈
},
{
headerMode:“无”
}
);
AppRegistry.registerComponent（'Stryn'，（）=>RootNavigator）；

您似乎正在为抽屉使用自己的组件，您正在

DrawerConfig

中使用该组件。由于您可以完全控制

DrawerItems

，因此只需将

LocalizedStrings

传递给它们，并使用

LocalizedStrings

中的一个键作为每个项目中的文本

附录

这些评论询问在初次唤醒后如何更新语言，或者通常如何更新菜单。这取决于您将当前语言保存在何处，以及如何将其传递给抽屉组件

---

例如，您可以将语言保存在Redux存储（或其他一些状态保持机制）中，然后使用

screenProps

将其传递给根导航器。这样，组件就可以从其道具中读取语言并调用正确的翻译。有关

屏幕道具的更多信息，请参见
您似乎正在为抽屉使用自己的组件，您正在
抽屉配置中使用该组件。由于您可以完全控制
DrawerItems
，因此只需将
LocalizedStrings
传递给它们，并使用
LocalizedStrings
中的一个键作为每个项目中的文本

附录

这些评论询问在初次唤醒后如何更新语言，或者通常如何更新菜单。这取决于您将当前语言保存在何处，以及如何将其传递给抽屉组件

例如，您可以将语言保存在Redux存储（或其他一些状态保持机制）中，然后使用
screenProps
将其传递给根导航器。这样，组件就可以从其道具中读取语言并调用正确的翻译。有关
屏幕道具
的更多信息，请参阅，但如何在首次唤醒后更新？也许使用单例进行本地化或其他方法？重点是，在语言更改后，下次刷新应该能够使用更改的语言更新菜单项，对吗？如何做到这一点，但如何更新后，首次醒来？也许使用单例进行本地化或其他方法？重点是，在语言更改后，下次刷新应该能够使用更改的语言更新菜单项，对吗？怎么做嗨，你找到解决办法了吗？嗨，你找到解决办法了吗？
/**
 * 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);