1. 程式人生 > >React Native 適配問題彙總

React Native 適配問題彙總

1. 小米手機上存在文字截斷的問題

  描述:

  居中對齊的Text在水平方向上會缺失最後一個字

  設定了行高的Text在垂直方向上最後一行會被截斷

  原因:小米使用了自定義的字型,從而造成了該問題

 解決方案:

針對android裝置統一把字型設定成android預設字型     fontFamily: 'DroidSansFallback'

2.在Android上圖片的容器被設定成圓角和 overflow:'hidden' 後,圖片不會顯示成圓角

原因:該0.41版本的RN在android上對圓角的支援有缺陷

解決方案:

額外的個圖片設定圓角屬性(注意:這裡是屬性不是樣式,圖片的圓角樣式不生效的)

<Image borderRadius={20} />
// or

<Image borderTopLeftRadius={20} borderTopRightRadius={20} />

3.在Android上View元件的ref有時會獲取到是undefined

原因:android預設的機制是實際渲染中不會渲染不影響佈局的View, 因此如果你ref的檢視剛好被忽略了,就無法獲取到了

解決方案:全域性禁用改特性,在 Global.js 中全域性禁用改特性

let originalViewDefaultProps = View.defaultProps;
View.defaultProps = {
  ...originalViewDefaultProps,
  collapsable: false,
};


4.在RN中如何用樣式寫三角形?

triangle {
    width: 0,
    height: 0,
    borderWidth: 7, // 等腰三角形底邊長度
    borderColor: 'transparent',
    borderTopColor: '#FF9F82', // 向下的三角形
    // borderBottomColor: '#FF9F82', // 向上的三角形
    // borderLeftColor: '#FF9F82', // 向右的三角形
    // borderRightColor: '#FF9F82', // 向左的三角形
}


rightBottomTriangle {
    width: 0,
    height: 0,
    borderWidth: 7, // 三角形直角邊長度
    borderColor: 'transparent',
    borderBottomColor: '#FF9F82', 
    borderRightColor: '#FF9F82', 
}

5.搜尋聯想列表項要兩次點選才會觸發回撥,第一次只會觸發收起鍵盤


原因:鍵盤彈起狀態下,預設列表檢視的點選會被全域性捕獲用於收起鍵盤。

解決方案:

給聯想列表所在的 ScrollView or ListView 增加如下屬性:

keyboardShouldPersistTaps={true}

6.android和iOS對螢幕點選事件的響應和檢視點選事件的響應是相反的

原因: 在android上,首先會捕捉全域性螢幕點選事件,再響應檢視的點選事件

在iOS上,首先響應的是檢視的點選事件,再捕捉全域性螢幕點選事件

解決方案:

在需要對處理捕捉全域性螢幕點選事件和響應檢視的點選事件要分別處理的時候,不應該以事件呼叫順序作為參考

7.鍵盤遮擋相關問題

描述:輸入框獲取焦點彈出鍵盤會蓋住處於螢幕下方的內容 解決方案:使用第三方庫react-native-keyboard-spacer,鍵盤彈起時會自動將一個鍵盤等高的view壓在<KeyboardSpacer/>標籤所在位置 // 引用

import KeyboardSpacer from 'react-native-keyboard-spacer';

// 插入

    <ScrollView>
        ...
    </ScrollView>
    <KeyboardSpacer/>