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

React Native 適配問題彙總續

8.低版本RN不支援ScrollView.scrollToEnd

宣告Scrollview,監聽取到height和contentheight

 <ScrollView
      ref={(scrollView) => { this.scrollView = scrollView; }}
      onLayout={(ev) => { this.scrollViewHeight = ev.nativeEvent.layout.height; }}
      onContentSizeChange={(w, h) => { this.contentHeight = h; }}
    >
    ...
 </ScrollView>
滾動到底部的方法
  scrollToBottom(animated = true) {
    const scrollHeight = this.contentHeight - this.scrollViewHeight;
    if (scrollHeight > 0) {
      this.scrollView.scrollTo({x: 0, y: scrollHeight, animated: animated});
    }
  }

9.iPhone plus手機 在高度是基數時設定左邊的上下圓角後右邊會出現一個背景無法完全覆蓋到的區域

<View style={{width: 100, height: 35, backgrondColor: 'blue', borderTopLeftRadius: 18, borderBottomLeftRadius: 18}} />

10.在android上移除一個節點時,與其平級的設定了zIndex的節點也會被移除

RN官方宣告該問題在 0.45 版本被修復, 但在框架升級前,沒有什麼最優解, 只能儘量避免在android上設定zIndex

11.iOS上ScrollView在進入二級頁面再返回,ScrollView的內容向下偏移20

OS的ViewController會根據所在介面的status bar,navigationbar,與tabbar的高度,自動調整scrollview的 contentInset
設定automaticallyAdjustsScrollViewInsets為NO,不讓viewController自動調整。

12.Android上超出View部分被截斷問題

描述: 在一個容器包含多個子佈局,若其中的一個子佈局超出容器邊界,在iOS上仍能正常顯示,但是在android會被截斷,通常需要調整子佈局到容器以內

13.小米6上顏色不生效問題

在小米6上發現的適配問題,在巢狀文字中,按照下面的方式寫,顏色會生效
<Text  style={styles.rankDesc}>距上榜還差
   <Text style={styles.rankColor}>12影響力</Text>
影響力</Text>

  rankDesc: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
  },
  rankColor: {
    color: '#ff7e00',
  },

如果按照這種方式,#ff7e00顏色不會生效

<Text  style={styles.rankDesc}>距上榜還差
   <Text style={{color: '#ff7e00'}}>12影響力</Text>
影響力</Text>

14.進場動畫異常隱藏不了或者不顯示

Native viewWillAppear與 JS componentDidMount時序不固定導致本地bundle componentDidMount 提前 hidePageLoading呼叫過早導致不隱藏
viewWillAppear呼叫過晚,在JSBundleDidLoad之後,可能框架處理的時候發選bundle已經載入完成了,就不顯示loading了

15.TextInput 的value的型別不一致


android: value型別和輸入型別一致 ,使用toString()轉換,游標顏色和字型顏色一致

iOS:value型別為string,游標顏色可以修改


android打包: react-native bundle --entry-file index.android.js --platform android --dev false --bundle-output ./android/bundle/index.android.jsbundle --assets-dest ./android/app/src/main/res/

複製/PaopaoReactNative/android/app/src/main/res 資料夾下的圖片資源到  /paopao_android/paopao_android/src/main/res/drawable-xxhdpi 目錄下 優先拷貝最大的圖片資源

iOS打包:react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle