大家开发应用的时候,可能会遇到根据所处不同国家和地区自动切换语言。我的项目是一个金融类的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