react Native 踩坑記錄

 

應用

1 安卓打包

經驗 解決方案 ，官方 解決方案

 2 調試

用 React-Native-Debugger  

教程

3 微信分享和登陸 

使用 react-native-wechat    地址

 

設計圖來自藍狐，能夠根據裏面的尺寸來進行開發，可是左右的間隔須要經過獲取設備寬度減兩邊來得出，

蘋果手機用 愛瘋6，  安卓需用自定義尺寸。

 

在蘋果上，默認高度是整個手機的高度；然而安卓默認是除了狀態欄如下的高度，咱們經過Dimensions獲取的高度也是不同的，也就是說，在安卓手機上獲取獲得的高度也是除了狀態欄如下的高度；官方提供一個常量，能夠獲取安卓手機上狀態欄的高，在蘋果手機上使用此方法獲取獲得的是undefined：   
currentHeight(僅限Android)狀態欄的當前高度StatusBar.currentHeight

 

彈性佈局中，給子text設置 width 不靠譜，在ios正常，在安卓不生效，可是給text套一個View 在view上設置寬度就能夠定寬了

rightStyle: {
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'flex-end',
  alignItems: 'center',
},

<View style={styles.rightStyle}>
  <View style={{ width: 200 }}>
    <Text style={styles.rightText}>{extra || rightText}</Text>
  </View>
  {arrow && <Image style={{ marginLeft: 8 }} source={rightPng} />}
</View>

TextInput 中的value 必需要爲 string  否則回填不上，  number 都填不上

<TextInput
  value={String(inputValue || '')}
  // style={{ textAlign: 'right', width: 200 }}
  onChangeText={inputChange}
  keyboardType={keyboardType}
  placeholder={inputPlaceholder}
/>
覺得text的換行省略號不行，原來是本身把text封裝了一下，忘記把props傳進去了，。。。本身坑本身

鍵盤遮擋問題的解決

斷網後的頁面刷新保存問題

右上角 彈框實現和封裝

常見錯誤

1打包時報錯

Could not list contents of '/Development/personalProject/RNCommunity/node_modules/node-pre-gyp/node_modules/.bin/needle'. Couldn't follow symbolic link.

解決方案

 2.  書寫時

Error while updating property 'padding' in shadow node of type: RCTView

null

For input string: "4% 1% 2"

解決方案

鍵盤遮擋

選擇日期控件更換，點擊選擇默認爲當前日期

上傳文件，照片牆

圖表展現

聯網方式不對，app閃退

web富文本編輯，在app端展現

長按 tooltip 的實現 複製和刪除

 分頁和刷新組件的封裝

上部份內容，下部分列表的實現：上部份內容放在 flatlist 的header裏面, 這樣就能夠用封裝的通用list組件了

echart圖表在rn中的展現

 

基礎工具util的封裝

日期格式轉換

request請求封裝 + 錯誤提示的統一封裝

 

 

 

遇到的坑

也有一次一塊傳多個大文件時，通過多人排查，才發現，原來是 nginx限制了請求體的大小