Question

我最后在RN上进行了实验，这似乎是本土开发的一个非常简洁的替代方案。

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

这很简单，我在所有的屏幕上都采用了它。我将它与AsyncStorage结合使用，因为我有一个屏幕，用户可以在其中更改独立于设备的应用程序内语言。现在的问题是，如何更新我的DrawerNavigator的标题？

这也是我的导航＆amp;堆栈已配置（注意我在设置中更改语言）：

/**
 * 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中的密钥作为每个项目中的文字。

<强>附录

评论询问如何在初次唤醒后更新语言，或者一般如何更新菜单。那么，这取决于你保持当前语言的位置，以及你如何将它传递给抽屉组件。

例如，您可以将语言保留在Redux存储（或其他一些状态保持机制）中，然后使用screenProps将其传递给根导航器。这样，组件可以从其道具中读取语言并调用正确的翻译。有关screenProps的详细信息，请参阅here。

React-Native DraweNavigator本地化/翻译

1 个答案: