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

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

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

  1. import React, { useState } from 'react'
  2. import { View, StyleSheet, FlatList } from 'react-native'
  3. import { SETTINS_JSON } from '@/Utility/Json/Settings'
  4. import { OptionsListItem, CustomButton } from '@/Components'
  5. import translate from '../../../Translations/index'
  6. const Settings = props => {
  7. const [data, setData] = useState(SETTINS_JSON)
  8. const renderOptionItem = ({ item, index }) => (
  9. <OptionsListItem item={item} onItemPress={props.navigateToScreen} />
  10. )
  11. const signOutButton = () => (
  12. <CustomButton
  13. mode="contained"
  14. name={translate('setting.signOut')}
  15. style={{ margin: 16 }}
  16. onPress={props.signOut}
  17. />
  18. )
  19. const itemSeparator = () => <View style={styles.itemSeparator} />
  20. return (
  21. <FlatList
  22. data={data}
  23. renderItem={renderOptionItem}
  24. keyExtractor={item => {
  25. item.title
  26. }}
  27. ListFooterComponent={signOutButton}
  28. ItemSeparatorComponent={itemSeparator}
  29. />
  30. )
  31. }
  32. const styles = StyleSheet.create({
  33. itemSeparator: {
  34. height: 1,
  35. width: '100%',
  36. opacity: 0.6,
  37. },
  38. })
  39. export default Settings

导入的设置\u json

  1. import translate from '../../Translations/index'
  2. export const SETTINS_JSON = [
  3. {
  4. title: translate('setting.personalDetail'),
  5. screenName: 'PersonalDetails',
  6. },
  7. {
  8. title: translate('setting.language'),
  9. screenName: 'ChangeLanguage',
  10. },
  11. {
  12. title: translate('setting.myEvModels'),
  13. screenName: 'EVModelList',
  14. additionalInfo: '2 EV models',
  15. },
  16. {
  17. title: translate('setting.changePassword'),
  18. screenName: 'ChangePassword',
  19. },
  20. {
  21. title: translate('setting.communicationPreferences'),
  22. screenName: 'CommunicationPreferences',
  23. },
  24. {
  25. title: translate('setting.serviceTerms'),
  26. screenName: 'TnCNotice',
  27. },
  28. ]

下面是语言选择文件

  1. import React from 'react'
  2. import { View, StyleSheet } from 'react-native'
  3. import { CustomButton } from '@/Components'
  4. import { useTheme } from '@/Theme'
  5. import DropDownPicker from 'react-native-dropdown-picker'
  6. import { LANGUAGE_JSON } from '../../../../Utility/Json/Locations'
  7. import { setLocale } from '../../../../Translations'
  8. const ChangeLanguage = props => {
  9. const [visible, setVisible] = React.useState(false)
  10. const [selectedLanguage, setSelectedLanguage] = React.useState()
  11. const { Colors } = useTheme()
  12. const saveLanguage = () => {
  13. setLocale(selectedLanguage)
  14. props.navigation.goBack()
  15. }
  16. const dropDown = () => (
  17. <DropDownPicker
  18. open={visible}
  19. value={selectedLanguage}
  20. placeholder="Select an Language"
  21. style={{
  22. borderColor: Colors.themeLightGreen,
  23. borderWidth: 2,
  24. marginTop: 20,
  25. borderRadius: 0,
  26. }}
  27. arrowIconStyle={{ tintColor: Colors.themeDarkGreen }}
  28. dropDownContainerStyle={styles.dropDownStyle}
  29. showTickIcon={false}
  30. items={LANGUAGE_JSON}
  31. setOpen={setVisible}
  32. setValue={setSelectedLanguage}
  33. />
  34. )
  35. return (
  36. <View style={styles.container}>
  37. {dropDown()}
  38. <CustomButton
  39. mode="contained"
  40. name="Save"
  41. style={{ marginTop: 20, zIndex: 0 }}
  42. onPress={saveLanguage}
  43. />
  44. </View>
  45. )
  46. }
  47. const styles = StyleSheet.create({
  48. container: {
  49. paddingHorizontal: 16,
  50. },
  51. dropDownStyle: {
  52. borderWidth: 0,
  53. borderRadius: 0,
  54. elevation: 2,
  55. marginTop: 20,
  56. },
  57. })
  58. export default ChangeLanguage

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

暂无答案!

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

相关问题