在react native中使用本地化时不重新呈现平面列表

yuvru6vn  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(225)

我想在我的应用程序中使用本地化,以便在我的react native应用程序中使用多种语言。它在应用程序中的正常文本工作正常,但我无法在flatlist中更改它。
下面是我的平面列表代码

import React, { useState } from 'react'
import { View, StyleSheet, FlatList } from 'react-native'
import { SETTINS_JSON } from '@/Utility/Json/Settings'
import { OptionsListItem, CustomButton } from '@/Components'
import translate from '../../../Translations/index'

const Settings = props => {
  const [data, setData] = useState(SETTINS_JSON)

  const renderOptionItem = ({ item, index }) => (
    <OptionsListItem item={item} onItemPress={props.navigateToScreen} />
  )

  const signOutButton = () => (
    <CustomButton
      mode="contained"
      name={translate('setting.signOut')}
      style={{ margin: 16 }}
      onPress={props.signOut}
    />
  )

  const itemSeparator = () => <View style={styles.itemSeparator} />

  return (
    <FlatList
      data={data}
      renderItem={renderOptionItem}
      keyExtractor={item => {
        item.title
      }}
      ListFooterComponent={signOutButton}
      ItemSeparatorComponent={itemSeparator}
    />
  )
}

const styles = StyleSheet.create({
  itemSeparator: {
    height: 1,
    width: '100%',
    opacity: 0.6,
  },
})

export default Settings

导入的设置\u json

import translate from '../../Translations/index'

export const SETTINS_JSON = [
  {
    title: translate('setting.personalDetail'),
    screenName: 'PersonalDetails',
  },
  {
    title: translate('setting.language'),
    screenName: 'ChangeLanguage',
  },
  {
    title: translate('setting.myEvModels'),
    screenName: 'EVModelList',
    additionalInfo: '2 EV models',
  },
  {
    title: translate('setting.changePassword'),
    screenName: 'ChangePassword',
  },
  {
    title: translate('setting.communicationPreferences'),
    screenName: 'CommunicationPreferences',
  },
  {
    title: translate('setting.serviceTerms'),
    screenName: 'TnCNotice',
  },
]

下面是语言选择文件

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { CustomButton } from '@/Components'
import { useTheme } from '@/Theme'
import DropDownPicker from 'react-native-dropdown-picker'
import { LANGUAGE_JSON } from '../../../../Utility/Json/Locations'
import { setLocale } from '../../../../Translations'

const ChangeLanguage = props => {
  const [visible, setVisible] = React.useState(false)
  const [selectedLanguage, setSelectedLanguage] = React.useState()
  const { Colors } = useTheme()
  const saveLanguage = () => {
    setLocale(selectedLanguage)
    props.navigation.goBack()
  }

  const dropDown = () => (
    <DropDownPicker
      open={visible}
      value={selectedLanguage}
      placeholder="Select an Language"
      style={{
        borderColor: Colors.themeLightGreen,
        borderWidth: 2,
        marginTop: 20,
        borderRadius: 0,
      }}
      arrowIconStyle={{ tintColor: Colors.themeDarkGreen }}
      dropDownContainerStyle={styles.dropDownStyle}
      showTickIcon={false}
      items={LANGUAGE_JSON}
      setOpen={setVisible}
      setValue={setSelectedLanguage}
    />
  )
  return (
    <View style={styles.container}>
      {dropDown()}
      <CustomButton
        mode="contained"
        name="Save"
        style={{ marginTop: 20, zIndex: 0 }}
        onPress={saveLanguage}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
  },
  dropDownStyle: {
    borderWidth: 0,
    borderRadius: 0,
    elevation: 2,
    marginTop: 20,
  },
})

export default ChangeLanguage

我可以更新其他文件中的语言,但它不更新平面列表(设置文件)
任何帮助都将不胜感激。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题