reactjs 根据AsyncStorage React Native中设置的语言呈现页面内容

oaxa6hgo 于 2023-01-04 发布在 React

关注(0)|答案(1)|浏览(120)

我正在创建一个应用程序，显示在三种语言的信息，而不使用任何APIS。在设置页面，用户可以单击更改为西班牙语按钮，这将存储在ASYNC存储。我是新的React Native，想知道这是否是最佳做法。

帐户设置

import { View, Text ,Button} from 'react-native'
import React, { useState , useEffect} from 'react'
import {AsyncStorage} from 'react-native';

const Account = () => {

  const setspanish=()=> {
    const lanugage = {      
      language:"spanish",
    }
 

    AsyncStorage.getItem('lang').then((datacart)=>{
        if (datacart !== null) {
          // We have data!!
          const lang = JSON.parse(datacart)
          lang.push(lanugage)
          AsyncStorage.setItem('lang',JSON.stringify(lang));
        }
        else{
          const lang  = []
          lang.push(lanugage)
          AsyncStorage.setItem('lang',JSON.stringify(lang));
        }
        alert("ChangedLnag")
      })
      .catch((err)=>{
        alert(err)
      })
  }
  return (
    <View>
     <Button onPress={setspanish} title="spanish"/>
    </View>
  )
}

export default Account

我已经在不同的页面创建了一个状态，但是没有一个会自动更新。一旦我导航到其他页面，我已经使用三元运算符来呈现，这取决于接收异步存储语言值的状态，但是没有一个工作。

reactjs

来源：https://stackoverflow.com/questions/74992606/rendering-page-contents-depending-on-language-set-in-asyncstorage-react-native

1条答案

按热度按时间

0dxa2lsx1#

你应该在上下文中设置它并保存它，第一次你应该把它重新设置到上下文中我写了例子关于这一点：

interface IConfig{
    lang: "en" | "lalala";
}
interface IContextConfig{
  config: IConfig;
  setConfig?: (val: any) => void;
}

export const ContextConfigApp = React.createContext<IContextConfig>({
      config: {lang: "en"},
});

interface IPropsProvider{
  init?: IConfig;
  children: React.ReactNode;
}

const Provider = ({init = {lang: "en"}}) => {
      const [config,setConfig] = useState<IConfig>(init);
      
      useEfect(() => {
        AsyncStorage.setItem('config',JSON.stringify(config));
      },[config]);
      
      
      useEfect(() => {
        (async () => {
          const tmp = await AsyncStorage.getItem('config');
          if(!!tmp && tmp) setConfig({...config,...JSON.parse(tmp)});
        })();
      },[]);

      return (
        <ContextConfigApp.Provider value={{config,setConfig}}>
          {children}
        </ContextConfigApp.Provider>
      )
}

const App = () => {
  return (
      <Provider>
        <Header />
      </Provider>
  )
}

const Header = () => {
  const {setConfig,config} = useContext(ContextConfigApp);
  return (
     <Button onPress={() => {
        setConfig({...config,lang: "en"})
     }}>EN</Button>
  )
}

- 用法**

const Example = () => {
  const {config} = useContext(ContextConfigApp)
  
  return (
    <Text>{config.lang}</Text>
  )
}

这只是一个例子，我希望它能帮助你

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 根据AsyncStorage React Native中设置的语言呈现页面内容

1条答案

相关问题

热门标签

最新问答