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

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

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

  1. 前面说了,可以根据三方接口获取国家地区,开始想在RN里面调用,但是前端有跨域的问题,如果三方不允许跨域访问的话,前端是没有什么办法的
  2. 在做移动端的时候,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
在React Native中,屏幕方向的切换可以通过使用Dimensions API来侦测屏幕尺寸的变化,并据此调整应用界面的布局。但是,React Native本身不会自动响应屏幕方向的改变。因此,如果在使用React Native开发应用时遇到了屏幕方向从横屏切换到竖屏,或者从竖屏切换到横屏时没有发生变化的问题,你需要手动监听这些变化并作出相应的调整。 一般来说,可以通过以下步骤来实现屏幕方向切换时的布局调整: 1. 使用`Dimensions`模块获取当前设备的宽度和高度,以此来判断当前是横屏还是竖屏。 ```javascript import { Dimensions } from 'react-native'; const { width, height } = Dimensions.get('window'); ``` 2. 创建一个状态变量来记录当前屏幕方向。 ```javascript const [orientation, setOrientation] = useState(width > height ? 'LANDSCAPE' : 'PORTRAIT'); ``` 3. 监听屏幕尺寸的变化,并更新状态变量。 ```javascript const changeOrientation = (newOrientation) => { if (newOrientation === 'LANDSCAPE' || newOrientation === 'PORTRAIT') { setOrientation(newOrientation); } }; Dimensions.addEventListener('change', ({ window: { width, height } }) => { changeOrientation(width > height ? 'LANDSCAPE' : 'PORTRAIT'); }); ``` 4. 根据状态变量`orientation`来决定显示横屏布局还是竖屏布局。 ```javascript return ( <View> {orientation === 'LANDSCAPE' ? ( <LandscapeView /> ) : ( <PortraitView /> )} </View> ); ``` 5. 清除监听器(确保在组件卸载时执行,避免内存泄漏)。 ```javascript useEffect(() => { return () => { Dimensions.removeEventListener('change', changeOrientation); }; }, []); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值