RN 踩坑日记

1.react-native-swiper

我们在使用 swiper 这个插件的时候，如果你是通过后台数据map出子节点，一定要加key。swiper会根据这个key的变化来决定是否渲染，所以这个key的值最好是JSON.stringify(data)

就像这样：

2.react-native-scrollable-tab-view

我们在使用该插件做tab页切换的时候，想要自定义tab栏目的样式，如果通过renderTabBar来写，就纯粹是自己写整个的切换栏样式，如果你想切换的时候有左右滑动的动画效果也需要自己写，但是我通过阅读他的源码发现，他本身提供了两种tab栏组件，DefaultTabBar 和 ScrollableTabBar，所以我们可以ScrollableTabView里给renderTabBar属性 传入ScrollableTabBar组件，然后又通过ScrollableTabBar组件的renderTab属性来达到自定义样式又兼顾动画的效果

就像这样：

因为ScrollableTabBar很多地方用到，所以我又封装了一层

通过ScrollableTabBar的renderTab属性达到每个item的渲染

3.react-native-drag-sort

在使用拖拽排序这个组件的时候，切记设置keyExtractor属性的使用不要用index，一定要用id否则会出现界面紊乱问题

4.Modal

在使用 RN 自带的Modal组件前你要记住，这个Modal 是会在最顶层的，有点类似于定位当中的z-index，但是我们无法将一个节点通过定位的z-index将其显示在Modal的更高层级。所以如果你使用该Modal 并且要在其中显示一个ant 的提示框是会被遮住的，因为ant的提示框是通过Portal 加 定位做的。

5.小米10 文本显示不完整

在最近做的一个电商项目中，有个地方的价格显示在刚出的小米10手机上会被截掉几位数字。领导拿着他新买的小米10大发雷霆，作为前端组长，我的第一反应是不是开发人员处理数据出问题了，结果查代码发现并无不妥的地方，用自己手机看也是正常，最终确定是小米10的问题。说说解决办法吧

在react-native的入口页app.js顶部增加配置如下：

	const oldRender = Text.render;
	Text.render = function (...args) {
	  const origin = oldRender.call(this, ...args);
	  return React.cloneElement(origin, {
	    style: [defaultFontFamily, origin.props.style],
	  });
	};

6.borderStyle不生效

原因：borderStyle要和borderRadius一起使用，否则无效

    borderStyle: "dashed",
    borderRadius: 1