ReactNative 坑点记录

ReactNative 坑点记录，持续爬坑之路…

• 布局在键盘弹出时被顶上去

要求：订单编辑点击确认，显示订单确认页，确认页ui内容显示底部，上部半透明，点击确认订单弹出密码输入框。

问题：用Modal盖在订单编辑上，点击确认输入密码，此时焦点在确认密码的Input上，订单确认的Modal布局被顶上去。

解决：发现订单确认页并没有获取焦点，但是尝试布局方式justyContent和columnReverse都会导致顶上去，目前通过固定确认页下半部分内容的高度，通过屏幕高度减去自身高度得到paddingTop，通过paddingTop的方式将内容区域压到底部。

• Modal层级高于Component

问题：项目自定toast 是继承component，层级预定高于StackNavigator，而modal的层级比component高，也就是说如果有modal存在，当你弹出toast时候，显示modal下面，如果modal不透明，可能就被挡住了。

解决：在toast之外包裹了一层Modal，提升toast等级。但是modal显示时，接受不了其他触摸事件，所以需要通过state来区分状态

• 加载更多

flatlist和list不同的实现，所以很多api不一样，在实现加载更多的时候，加载底部布局list是renderFoot，flatlist是ListFooterComponent，底部布局的渲染实际并不是数据显示完了，所以会多次调用。而onEndReached是所有数据显示完毕才会调用，所以一般加载更多的实现会在这个地方。配合onEndReachedThreshold使用，会更丝滑。

• FlatList 黄色警告

VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.
数据数组中的每个元素的结构需要是{key,value}的形式，可以参考下面的博客修复。

http://www.jianshu.com/p/31e3cb511c73