我想在我的应用程序中使用本地化,以便在我的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
我可以更新其他文件中的语言,但它不更新平面列表(设置文件)
任何帮助都将不胜感激。
暂无答案!
目前还没有任何答案,快来回答吧!