React-Native APP兼容采坑記錄


APP最近測試出一些兼容性問題,這里記錄一下,以免重復踩坑
一、 TextInputoppovivo等手機上無法彈出鍵盤

此乃react-native神坑之一,官方提供的組件竟然還存在兼容性問題,簡直了,文本輸入框彈不出鍵盤,用戶還用個“錘子”。打住,繼續聊bug

 

bug的詳細表現為:

(1)  第一次進入界面可以正常彈出鍵盤,然后返回上一頁,再進入當前頁面,則有一定幾率(50%左右)鍵盤無法彈出。

(2)  如果手機鎖屏再打開,原先不能調起軟鍵盤的界面就可以調起

(3)  alter彈框之后,原先不能調起軟鍵盤的界面也是可以調起

(4)  在用戶進入頁面的時候默認顯示一個modal(啥叫modal?點擊這里查看),大概0.5后關閉,之后再使用不會出現鍵盤無法彈出的情況(經過反復測試驗證)。

(5)  封裝的原生EditText組件在RN中使用,鍵盤可以正常使用(注:該方法沒有驗證,結論來自https://blog.csdn.net/zpswz/article/details/83028737)。

 

結合上面的幾種情況來看,鎖屏的用戶體驗不好,alert彈框的樣式不好設置。目前的解決方式只有兩種了:

(1)  彈出透明modal然后自動消失

(2)  封裝EditTextRN調用

由於沒有封裝原生控件的經驗,也不知原生和RN中數據如何傳遞,因此目前采用了第一種方式。

 

解決方案代碼詳解如下:

1.  import React from 'react';  

2.  import {View, ScrollView, Modal} from 'react-native';    

3. 

4.  export default class InputTextOppoDemoPage extends React.Component {  

5.    

6.      constructor(props) {  

7.          super(props)  

8.          this.state = ({  

9.              //兼容oppo手機textinput組件的modal  

10.              isModalOppo: false  

11.          })  

12.      }  

13.    

14.      /** 

15.      *顯示獨占框--oppo   

16.      */  

17.      showModalOppo() {  

18.          this.setState({  

19.              isModalOppo: true  

20.          })  

21.      }  

22.    

23.      /** 

24.       * 關閉獨占框--oppo 

25.       */  

26.      hideModalOppo() {  

27.          this.setState({  

28.              isModalOppo: false  

29.          })  

30.      }  

31.    

32.      /** 

33.       * android平台必須實現--oppo 

34.       */  

35.      onRequestCloseOppo() {  

36.          this.setState({  

37.              isModalOppo: false  

38.          });  

39.      }  

40.        

41.      /** 

42.       * 兼容oppo textinput組件 

43.       */  

44.      componentDidMount() {  

45.          //剛進入頁面時顯示modal,modal的樣式被設置為透明,用戶看不見  

46.          this.showModalOppo()  

47.          //0.5秒之后關閉modal  

48.          setTimeout(() => {  

49.              this.hideModalOppo()  

50.          }, 500)  

51.      }  

52.    

53.      /** 

54.       * 組件渲染 

55.       */  

56.      render() {  

57.    

58.          return (  

59.              <ScrollView style={{flex:1} keyboardShouldPersistTaps={'handled'}>  

60.                    

61.                  {/* 兼容oppo手機textinput */}  

62.                  <Modal  

63.                      animationType='fade'            // 淡入淡出  

64.                      transparent={true}              // 透明  

65.                      visible={this.state.isModalOppo}    // 根據isModalOppo決定是否顯示  

66.                      onRequestClose={() => { this.onRequestCloseOppo() }}  // android必須實現  

67.                  >  

68.                      {/* 設置modal顏色為透明 */}  

69.                      <View style={{ height: 100, width: 180, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0)', borderRadius: 10 }}>  

70.                      </View>  

71.                  </Modal>  

72.    

73.              </ScrollView>  

74.          )  

75.      }  

76.  }  

 

在所有包含TextInput的組件中引入上述代碼即可解決TextInput鍵盤不彈出問題。不過,這種方式的不好之處就是比較麻煩。有TextInput組件的地方都要引入這一大段代碼,有點冗余。這是目前我們能力下能提出的最好的解決辦法了,有其他的辦法可以評論交流。

 

再啰嗦一下我查證該bug遇到的一個有趣的情況:

 

(1)  React-NativeGithub Issue里發現關於這個問題的描述:大致意思是反饋了oppo手機React-Native原生組件文本輸入框TextInput不彈出鍵盤的問題

 

(2)  React-NavigationGithub Issue里面也發現了一個類似的:大致意思是說,使用React-Navigation路由導致了在oppo手機TextInput鍵盤不彈出。 

 

(3)  同時之前還在oppo開發者社區官網上面看到了關於React-Native TextInput組件不彈鍵盤的反饋,地址已不可考。

 

綜合以上三點可以看出,由於TextInput組件這個情況比較特殊,可能有三個方面的原因導致,就連筆者目前也不敢斷定,不過很有可能是oppo手機兼容性的問題,如果您有更好的見解,歡迎評論交流。由於oppovivo、魅族等國產手機對Android定制加深,不可避免的產生了兼容性問題,這方面小米和華為做的就非常好。基本上沒有不兼容問題。

 

可以看到,這個問題2017年就被發現了,到現在已經2年多過去了,仍然沒有解決。給廣大開發者造成了不小的麻煩,希望相關開發者不要踢皮球,盡快解決。

 

二、 Android6.0以下相機權限問題

(1)  問題說明,該bug僅僅存在於react-native-camera 1.1.4版本,之后再更高版本的如1.13.0測試該問題已不存在。

(2)  bug的主要情況是react-native-camera對於相Android6.0以下版本相機權限的控制問題,明明沒有獲取到相機權限,卻返回已獲取。導致相機不能正常工作。

 

針對該問題的解決方式是修改handlePermissions.js,具體見下圖

 

三、 ImageBackgroud組件不指定Source導致應用閃退問題

(1)  問題說明:該問題尚不確定是Android版本問題還是機型問題

出現錯誤導致閃退的是這樣一段代碼,該代碼在小米Mix3Android9)上面顯示沒問題,就顯示空白,在Oppo A53m (Android 5.1)上面就閃退。

 

1.  <ImageBackground source={require('')}  width = 100 height = 100/>  

 

(2)  解決說明:指定一個默認的空白圖片即可

 

1.  <ImageBackground source={require('../../../../assets/4/blank.jpg')}  width = 100 height = 100/>  

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM