最近reactNative在開發(fā)android中遇到的坑

首先說一下我的ReactNative的版本是0.43.4,Android6.0(華為榮耀6Plus),以下遇到的坑,在最新版的RN中沒測(cè)試是否還存在,不過按照Facebook的團(tuán)隊(duì)習(xí)慣,我估計(jì)還是沒修復(fù)的。

一、Textinput

1、android下相同高度的輸入框高度比ios下高。

android平臺(tái)上,在padding沒指定時(shí),通過Toggle Inspector可以發(fā)現(xiàn)TextInput的padding明明是0(見下圖1),但實(shí)際并非如此,paddingVertical必須指定為0。

Android下發(fā)現(xiàn)輸入框高度莫名其妙異常


將paddingVertical設(shè)為0后,正常了

2、onContentSizeChange方法在初始化時(shí)會(huì)執(zhí)行一次,后面就再也不執(zhí)行,這樣要實(shí)現(xiàn)輸入框的自動(dòng)高度就無法實(shí)現(xiàn),只能通過在onChange方法中去實(shí)現(xiàn)

onTextShouldChange(event) {
? ? lettext= event.nativeEvent.text;
? ? //TODO:ANDROID上onContentSizeChange不生效,需要通過onChange來
? ? if(Platform.OS=='android'){
? ? ? ? this.onContentSizeChange(event);
? ? }
}
onContentSizeChange(event) {
? ? let hei=Math.max(event.nativeEvent.contentSize.height,22*scale);
? ? this.setState({inputHei:Math.min(hei,136*scale)});
}

二、攝像頭與相冊(cè)讀取

android6.0及以上版本,在android/app/src/AndroidManifest.xml配置權(quán)限已不起作用,必須在代碼中做權(quán)限判斷

示例:

import{
? ? Platform,
? ? PermissionsAndroid
} from'react-native';
....
requestPermission(pname){
? ? if(Platform.OS=='ios'){
? ? ? ? return true;
? ? }
? ? try{
? ? ? ? let message='',title='';
? ? ? ? if(pname==PermissionsAndroid.PERMISSIONS.CAMERA){
? ? ? ? ? ? title= Di18n.tr('訪問相機(jī)授權(quán)');
? ? ? ? ? ? message= Di18n.tr('需要允許使用您的相機(jī)才可拍照');
? ? ? ? }
? ? ? ? const ?granted=awaitPermissionsAndroid.request(pname,{title,message});
? ? ? ? if(granted===PermissionsAndroid.RESULTS.GRANTED) {
? ? ? ? ? ? return true;
? ? ? ? }else{
? ? ? ? ? ? return false;
? ? ? ? }
? ? }catch(err) {
? ? ? ? console.log('requestPermission err',err);
? ? ? ? return false;
? ? }
}

componentDidMount(){
? ? this.requestPermission(this.permission).then((result)=>{
? ? ? ? if(result){
? ? ? ? ? ? //有權(quán)使用了
? ? ? ? }else{
? ? ? ? ? ? Toast.show(Di18n.tr('您沒有授權(quán),無法使用相機(jī)'));
? ? ? ? }
? ? });
}


三、View的overflow:hidden和borderRadius同用時(shí),hold不住里面子component,所以當(dāng)要實(shí)現(xiàn)圖片圓角時(shí),只能對(duì)View里面的子Component圖片加borderRadius屬性。

BUG網(wǎng)址描述:

https://github.com/facebook/react-native/issues/3198
https://github.com/facebook/react-native/issues/8885

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容