APP最近測試出一些兼容性問題,這里記錄一下,以免重復踩坑
一、 TextInput在oppo、vivo等手機上無法彈出鍵盤
此乃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) 封裝EditText給RN調用
由於沒有封裝原生控件的經驗,也不知原生和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-Native的Github Issue里發現關於這個問題的描述:大致意思是反饋了oppo手機React-Native原生組件文本輸入框TextInput不彈出鍵盤的問題
(2) 在React-Navigation的Github Issue里面也發現了一個類似的:大致意思是說,使用React-Navigation路由導致了在oppo手機TextInput鍵盤不彈出。
(3) 同時之前還在oppo開發者社區官網上面看到了關於React-Native TextInput組件不彈鍵盤的反饋,地址已不可考。
綜合以上三點可以看出,由於TextInput組件這個情況比較特殊,可能有三個方面的原因導致,就連筆者目前也不敢斷定,不過很有可能是oppo手機兼容性的問題,如果您有更好的見解,歡迎評論交流。由於oppo、vivo、魅族等國產手機對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版本問題還是機型問題
出現錯誤導致閃退的是這樣一段代碼,該代碼在小米Mix3(Android9)上面顯示沒問題,就顯示空白,在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/>