一律、 style=”color: #ff6600;”>前沿||潜心修心，学无止尽。生活如此，coding亦然。本人鸟窝，一仅正在求职的禽。联系自身可一直微信：jkxx123321
仲、 style=”color: #0000ff;”>项目总
style=”font-size: 16px; color: #0000ff;”> **||**章参考资料：1.
http://blog.csdn.net/u011272795/article/details/73824558style=”font-size: 16px; color: #0000ff;”> 2.http://blog.csdn.net/qq\_25280063/article/details/52294221
1）px2dp详细总结
style=”font-size: 16px;”>现在之无绳电话机品牌以及型号越来越多，导致我们平常描绘布局的上会于只不同之运动设备上亮的成效差，
style=”font-size: 16px;”>比如我们的设计稿一个View的尺寸是300px，如果直白写300px，可能当时装备显示正常，但至了别样设施可能就会偏小或者偏老，这就待我们针对屏幕进行适配。Android原生的语句来温馨之适配规则，可以因不同之尺码建立不同的文件夹，系统会因当前之装备尺寸取对应的深浅的布局。而RN本身并没适配规则，而原生的而比反锁，这便需我们自己去对屏幕进行适配。
预先看一下正出炉的屏幕适配工具类：
/** * Created by zhuoy on 2017/6/27. * 屏幕工具类 * ui设计基准,iphone 6 * width:750 * height:1334 *//
设备的像素密度，例如：
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5 Nexus 6 /
import {
Dimensions,
PixelRatio,
} from ‘react-native’;export const deviceWidth = Dimensions.get(‘window’).width; //设备的肥瘦
export const deviceHeight = Dimensions.get(‘window’).height; //设备的万丈
let fontScale = PixelRatio.getFontScale(); //返回字体大小缩放比例
let pixelRatio = PixelRatio.get(); //当前设备的像素密度
const defaultPixel = 2; //iphone6的像素密度
//px转换成dp
const w2 = 750 / defaultPixel;
const h2 = 1334 / defaultPixel;
const scale = Math.min(deviceHeight / h2, deviceWidth / w2); //获取缩放比例
/*** 设置text为sp * @param size sp * return number dp */ export function setSpText(size: number) { size = Math.round((size * scale + 0.5) * pixelRatio / fontScale); return size / defaultPixel; }export function scaleSize(size: number) {
size = Math.round(size * scale + 0.5);
return size / defaultPixel;
}
style=”font-size: 16px;”>因为一般的设计稿都是以iphone6为根基来计划的，所以这里坐iPhone6为底蕴写这家伙类，
style=”font-size: 16px;”>当然如果你的不是，可以于点更改，defaultPixelRatio改成为你用的设施像从即吓了。
咱这里针对文字及尺寸进行了适配。
style=”font-size: 16px;”>看一下均等的代码在不同手机的显示力量：
代码：
export default class Home extends React.Component {render() {
return (
没适配,本机像素：{PixelRatio.get()}
已适配
)
}
}
style=”font-size: 16px;”>这里，我用了像素为1.5暨2.65的2单安卓设备来拓展展示：
style=”font-size: 16px;”>
style=”font-size: 16px;”>如图：左侧是大屏，右侧是小屏手机。
style=”font-size: 16px;”>第一行还是大小为30px之仿，因为屏幕本身的原委，导致看起也许大小不同，但实际上就是同等之大小文字。
style=”font-size: 16px;”>而第二履我们适配过之看以盼，在大屏上(相对于iPhone6)，30px进行了推广，而小屏上虽开展了紧缩的操作。
style=”font-size: 16px;”>这样，在不同装备上，就会见展示合适的字体大小。
下的View也是一律的理，都进展了不同档次的紧缩。
欠篇频频与新…喜欢的请关注…
频频更新
style=”font-size: 16px;”>今天朝着大家介绍一个组件（我看还不错的机件，感谢情书哥为自己找到）
style=”font-size: 16px;”>参考资料：https://github.com/nicinabox/react-native-line-gauge
style=”font-size: 16px;”>
style=”font-size: 16px;”>对这第三正在要有需要的，请让自我关系，联系方式文章首页给来。
拖欠文章频频与新…喜欢的请关注…
穿梭与新
style=”font-size: 16px;”>今天牵线一下一个常用的地点选择组件，用sectionList做的连地址:http://www.jianshu.com/p/09dd60d7b34f效果图：
style=”font-size: 16px;”>
style=”font-size: 16px;”> 另外，如果想跟多了解flatlist和sectionlist，请去脚两各项个人的博客去看：
style=”font-size: 16px;”>ReactNative分组列表SectionList使用详情及示范详解:
style=”font-size: 16px;”>http://www.cnblogs.com/vipstone/p/7250625.html
本着flat list中几乎个常因此的性能翻译一下：
ItemSeparatorComponent：分割线组件， ListFooterComponent：结尾组件 ListHeaderComponent：头组件 data：列表数据 horizontal：设置为true则变为水平列表。 numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局 columnWrapperStyle：numColumns大于1时，设置每行的样式 getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。 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
style=”font-size: 16px;”>资料：https://github.com/reactnativecomponent/react-native-netease-im
style=”font-size: 16px;”>
连与新
React
Native中点击输入文本框时，弹出来的键盘遮挡文本框的化解方案！效果图：
style=”font-size: 16px;”>
参考资料代码：
问题
style=”font-size: 16px;”>iOS：输入框获取关节时，弹出的键盘会荫挡视图区域。
style=”font-size: 16px;”>疑问：是于上层遮挡，还是同层压缩了视图容器的可观导致的？
style=”font-size: 16px;”>Android：输入框获取关节时，键盘区域会压缩视图高度（屏幕高度
键盘高度），不同的视图容器内处理状态不同等。
在 ScrollVIew
上开拓键盘时，会自行根据当下输入框是否为键盘挡住来滚视图；每当 View
上打开键盘时，视图内容稍聊上转移，由于视图高度为减去，超出视图的情节展示不出来；釜底抽薪方案
化解 View 组件的键盘遮挡问题
采用状况
style=”font-size: 16px;”>类似雪球的记名界面（View），上半部分是图表，下半部分是登录表单。在表单输入框获取关节时，键盘占据屏幕下一半片，并压缩上方的图形高度，以解决键盘遮挡输入框问题。
落实方式
style=”font-size: 16px;”>react-native-keyboard-spacer
…
解决 ScrollView 组件的键盘遮挡问题
采取状况
于 ScrollView / ListView 组件内部设有
TextInput
组件，要求输入框获取关节时，视图容器自动调整滚动高度，确保输入框出现在键盘上。实现方式：
style=”font-size: 16px;”>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
style=”font-size: 16px;”>补充相同种植用<ScrollView>完成这个功效demo：http://www.jianshu.com/p/fb7c718a8d9a
效果图:
style=”font-size: 16px;”>
今以及新的是日历，日期选择组件
看图：
style=”font-size: 16px;”>
style=”font-size: 16px;”>参考资料：https://github.com/mmazzarolo/react-native-modal-datetime-picker
作者介绍：半路学IT，做开发3年，先下车于相同下共享单车店，做后台开发！
我起了一个公众号，欢迎各位有志同道合朋友，关注！不期分享工作，和自我得故事！
style=”color: #ff0000;”>告随意打赏
style=”font-size: 16px;”>
(微信扫码)
一样、 style=”color: #ff6600;”>前沿||潜心修心，学无止尽。生活这么，coding亦然。本人鸟窝，一特着求职的飞禽。联系我得一直微信：jkxx123321
其次、 style=”color: #0000ff;”>项目总
style=”font-size: 16px; color: #0000ff;”> **||**章参考资料：1.
http://blog.csdn.net/u011272795/article/details/73824558style=”font-size: 16px; color: #0000ff;”> 2.http://blog.csdn.net/qq\_25280063/article/details/52294221
1）px2dp详细总结
style=”font-size: 16px;”>现在底手机品牌与型号越来越多，导致我们平常形容布局的时候会以个例外之位移装备上展示的功用不同，
style=”font-size: 16px;”>比如我们的设计稿一个View的深浅是300px，如果一直写300px，可能以目前设备显示正常，但顶了其他装置可能就见面偏小或者偏老，这便得我们本着屏幕进行适配。Android原生的语有协调的适配规则，可以依据不同之尺寸建立不同的文本夹，系统会依据目前的配备尺寸取对应之轻重的布局。而RN本身并从未适配规则，而原生的还要比较反锁，这就算需要我们温馨失去对屏幕进行适配。
先期看一下正好出炉的屏幕适配工具类：
/** * Created by zhuoy on 2017/6/27. * 屏幕工具类 * ui设计基准,iphone 6 * width:750 * height:1334 *//
设备的像素密度，例如：
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5 Nexus 6 /
import {
Dimensions,
PixelRatio,
} from ‘react-native’;export const deviceWidth = Dimensions.get(‘window’).width; //设备的小幅
export const deviceHeight = Dimensions.get(‘window’).height; //设备的莫大
let fontScale = PixelRatio.getFontScale(); //返回字体大小缩放比例
let pixelRatio = PixelRatio.get(); //当前配备的像素密度
const defaultPixel = 2; //iphone6的像素密度
//px转换成dp
const w2 = 750 / defaultPixel;
const h2 = 1334 / defaultPixel;
const scale = Math.min(deviceHeight / h2, deviceWidth / w2); //获取缩放比例
/*** 设置text为sp * @param size sp * return number dp */ export function setSpText(size: number) { size = Math.round((size * scale + 0.5) * pixelRatio / fontScale); return size / defaultPixel; }export function scaleSize(size: number) {
size = Math.round(size * scale + 0.5);
return size / defaultPixel;
}
style=”font-size: 16px;”>因为相似的设计稿都是为iphone6为底蕴来规划的，所以这里为iPhone6为根基写这个家伙类，
style=”font-size: 16px;”>当然要你的莫是，可以当上头更改，defaultPixelRatio改化你用之装备像从即好了。
咱俩这边对文字与尺寸进行了适配。
style=”font-size: 16px;”>看一下一如既往的代码在不同手机的显得力量：
代码：
export default class Home extends React.Component {render() {
return (
没适配,本机像素：{PixelRatio.get()}
已适配
)
}
}
style=”font-size: 16px;”>这里，我之所以了例如素为1.5同2.65之2只安卓设备来开展亮：
style=”font-size: 16px;”>
style=”font-size: 16px;”>如图：左侧是大屏，右侧是小屏手机。
style=”font-size: 16px;”>第一履行且是大大小小也30px底亲笔，因为屏幕本身的故，导致看起或大小不一，但实质上就是一样的轻重缓急文字。
style=”font-size: 16px;”>而第二行我们适配过的羁押因为张，在大屏上(相对于iPhone6)，30px进行了拓宽，而小屏上则展开了压缩的操作。
style=”font-size: 16px;”>这样，在不同装备及，就会显得合适的字体大小。
下面的View也是同样的道理，都开展了不同水平之缩小。
该文章频频和新…喜欢的请关注…
连创新
style=”font-size: 16px;”>今天通往大家介绍一个零部件（我以为还不易的零件，感谢情书哥为自家找到）
style=”font-size: 16px;”>参考资料：https://github.com/nicinabox/react-native-line-gauge
style=”font-size: 16px;”>
style=”font-size: 16px;”>对是第三正要来需求的，请为自己沟通，联系方式文章首页给闹。
欠篇频频与新…喜欢的请关注…
频频和新
style=”font-size: 16px;”>今天介绍一下一个常用之地址选择组件，用sectionList做的连天地址:http://www.jianshu.com/p/09dd60d7b34f效果图：
style=”font-size: 16px;”>
style=”font-size: 16px;”> 另外，如果想以及多矣解flatlist和sectionlist，请去下两位个人的博客去押：
style=”font-size: 16px;”>ReactNative分组列表SectionList使用详情以及示范详解:
style=”font-size: 16px;”>http://www.cnblogs.com/vipstone/p/7250625.html
针对flat list中几个常因此之性能翻译一下：
ItemSeparatorComponent：分割线组件， ListFooterComponent：结尾组件 ListHeaderComponent：头组件 data：列表数据 horizontal：设置为true则变为水平列表。 numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局 columnWrapperStyle：numColumns大于1时，设置每行的样式 getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。 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
style=”font-size: 16px;”>资料：https://github.com/reactnativecomponent/react-native-netease-im
style=”font-size: 16px;”>
连与新
React
Native中点击输入文本框时，弹出来的键盘遮挡文本框的缓解方案！效果图：
style=”font-size: 16px;”>
参考资料代码：
问题
style=”font-size: 16px;”>iOS：输入框获取关节时，弹出的键盘会荫挡视图区域。
style=”font-size: 16px;”>疑问：是当上层遮挡，还是同层压缩了视图容器的可观导致的？
style=”font-size: 16px;”>Android：输入框获取关节时，键盘区域会压缩视图高度（屏幕高度
键盘高度），不同的视图容器内处理状态不同等。
当 ScrollVIew
上打开键盘时，会自行根据当下输入框是否受键盘挡住来滚视图；于 View
上打开键盘时，视图内容稍聊上转移，由于视图高度为削减，超出视图的情节展示不出来；化解方案
化解 View 组件的键盘遮挡问题
采取状况
style=”font-size: 16px;”>类似雪球的记名界面（View），上半部分是图表，下半部分是登录表单。在表单输入框获取关节时，键盘占据屏幕下一半片，并压缩上方的图片高度，以解决键盘遮挡输入框问题。
实现方式
style=”font-size: 16px;”>react-native-keyboard-spacer
…
釜底抽薪 ScrollView 组件的键盘遮挡问题
使状况
以 ScrollView / ListView 组件内部存在
TextInput
组件，要求输入框获取关节时，视图容器自动调整滚动高度，确保输入框出现在键盘上。贯彻方式：
style=”font-size: 16px;”>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
style=”font-size: 16px;”>补充相同种植用<ScrollView>完成这个功效demo：http://www.jianshu.com/p/fb7c718a8d9a
效果图:
style=”font-size: 16px;”>
今以及新的是日历，日期选择组件
看图：
style=”font-size: 16px;”>
style=”font-size: 16px;”>参考资料：https://github.com/mmazzarolo/react-native-modal-datetime-picker
作者介绍：半路学IT，做开发3年，先下车于相同小共享单车店，做后台开发！
我起了一个公众号，欢迎各位有志同道合朋友，关注！不期分享工作，和自我得故事！
style=”color: #ff0000;”>吁随意打赏
style=”font-size: 16px;”>
(微信扫码)