|
算行高的开销。 refreshing：是否正在加载数据 onRefresh：设置此属性需要一个标准的 RefreshControl 控件，刷新数据 renderItem：渲染每个组件 onViewableItemsChanged：当一个新的Item渲染或者隐藏 的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item。 scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡。 scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置 scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置
再介绍一个IM
资料：https://github.com/reactnativecomponent/react-native-netease-im
持续跟新
React Native中点击输入文本框时，弹出来的键盘遮挡文本框的解决方案！
效果图：
参考资料代码：
问题
-
iOS：输入框获取焦点时，弹出的键盘会遮挡视图区域。 疑问：是在上层遮挡，还是同层压缩了视图容器的高度导致的？
-
Android：输入框获取焦点时，键盘区域会压缩视图高度（屏幕高度 - 键盘高度），不同的视图容器内处理情况不一样。
解决方案
解决 View 组件的键盘遮挡问题
使用场景
类似雪球的登录界面（View），上半部分是图片，下半部分是登录表单。在表单输入框获取焦点时，键盘占据屏幕下半部分，并压缩上方的图片高度，以解决键盘遮挡输入框问题。
实现方式
解决 ScrollView 组件的键盘遮挡问题
使用场景
在 ScrollView / ListView 组件内部存在 TextInput 组件，要求输入框获取焦点时，视图容器自动调整滚动高度，确保输入框出现在键盘上方。
实现方式：
-
KeyboardAvoidingView React Native 提供的组件，但要求 react-native 版本大于等于 0.29
-
使用 scrollView 组件实例的 API 实现 // Scroll a component into view. Just pass the component ref string.inputFocused (refName)
-
{ setTimeout(() => { let scrollResponder = this.refs.scrollView.getScrollResponder();
-
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
-
React.findNodeHandle(this.refs[refName]), 110, //additionalOffset
true
);
}, 50);
}render () { return ( <ScrollView ref='scrollView'>
<TextInput ref='username'
onFocus={this.inputFocused.bind(this, 'username')} </ScrollView>
)
}
-
备注：在 KeyboardAvoidingView 出现前的早起解决方案（不存在版本限制？）。
跟新时间 ：2017年8月29日22:24:00
补充一种用<ScrollView>完成此功能demo：http://www.jianshu.com/p/fb7c718a8d9a
效果图:
 
今天跟新的是日历，日期选择组件
看图：
 
参考资料：https://github.com/mmazzarolo/react-native-modal-datetime-picker
请随意打赏
(微信扫码)
|