RN 根据是否是中国地区，切换主体语言的需求

最新推荐文章于 2025-05-13 14:36:22 发布

爱谁谁12138

最新推荐文章于 2025-05-13 14:36:22 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/wangqiuwei07/article/details/86703236

ReactNative 专栏收录该内容

31 篇文章

订阅专栏

大家开发应用的时候，可能会遇到根据所处不同国家和地区自动切换语言。我的项目是一个金融类的App，但是不只有App端，RN有一个react-native-web库，可以实现web端和移动端统一一套代码（具体的可以看看这个库）。而我的需求是根据是否是中国地区，切换中文和英文。
先说最终的解决方案再说坑爹经历：
说实话，这种方式并不是最好的，最好的办法是后台写一个接口，根据客户端的ip返回国家地区。
在这种情况下就只能分别判断web和移动端，不能同时处理了。

if (window.web){
    let lang = navigator.language||navigator.userLanguage;//获取浏览器设置的默认语言
    lang = lang.substr(0, 2);//这里取两位比较，因为香港和台湾都是 ‘zh’开头
    if(lang == 'zh'){
        this.language = 'cn'
        this.currentLanguageData = cn
    }else{
        this.language = 'en'
        this.currentLanguageData = en     
    }
} else {
    let url = 'https://api.myip.com/'
    fetch(url, {
        headers: {
            "Content-Type": "application/json",
        }
    }).then(response => response.json()).then(responseJson => {
        console.log('country' + responseJson.country)
        if(responseJson.country=='China'){
            this.language = 'cn'
            this.currentLanguageData = cn
        }else{
            this.language = 'en'
            this.currentLanguageData = en     
        }
    
    }).catch(error => {
        console.log(error.description)
    })
}

实现的过程中遇到两个坑：

前面说了，可以根据三方接口获取国家地区，开始想在RN里面调用，但是前端有跨域的问题，如果三方不允许跨域访问的话，前端是没有什么办法的
在做移动端的时候，RN有一个获取设备信息的接口，当时想的是通过获取ip地址，然后调用接口获取ip所属的国家地区，试了以后发现不行，因为获取的地址可能是局域网地址react-native-device-info
最后，因为我这里后台没有写接口，只能用这种方法处理，最后是后台写一个类似这样的接口。
js时间处理库moment。
网上有许多获取ip地址和国家地区的接口：
http://pv.sohu.com/cityjson?ie=utf-8
https://api.myip.com/
根据ip获取国际地区等信息的接口：
http://ip.taobao.com/service/getIpInfo.php?ip=119.139.196.127