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 | rightText}</Text>
  </View>
  {arrow && <Image style={{ marginLeft: 8 }} source={rightPng} />}
</View>

TextInput 中的value 必须要为 string  不然回填不上，  number 都填不上

<TextInput
  value={String(inputValue || '')}
  // 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限制了请求体的大小