react native进阶。react native进阶。



同等、 style=”color: #ff6600;”>前沿||潜心修心,学无止尽。生活这么,coding亦然。本人鸟窝,一仅在求职的鸟儿。联系自身可以一直微信:jkxx123321

第二、 style=”color: #0000ff;”>项目总

style=”font-size: 16px; color: #0000ff;”>  **||**章参考资料:1. 
http://blog.csdn.net/u011272795/article/details/73824558   

style=”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;”>澳门葡京 1

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;”>澳门葡京 2

 

style=”font-size: 16px;”>对这个第三正在要出要求的,请让自我联络,联系方式文章首页给来。

拖欠文章频频与新…喜欢的请关注…


随地和新
style=”font-size: 16px;”>今天介绍一下一个常用之地址选择组件,用sectionList做的连年地址:http://www.jianshu.com/p/09dd60d7b34f

效果图:

style=”font-size: 16px;”>澳门葡京 3

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;”>澳门葡京 4

 


连发和新

React
Native中点击输入文本框时,弹出来的键盘遮挡文本框的缓解方案!

效果图:

style=”font-size: 16px;”>澳门葡京 5

 

参考资料代码:

问题

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;”>澳门葡京 6澳门葡京 7


今与新的是日历,日期选择组件

看图:

style=”font-size: 16px;”>澳门葡京 8澳门葡京 9

style=”font-size: 16px;”>参考资料:https://github.com/mmazzarolo/react-native-modal-datetime-picker

 

 

作者介绍:半路学IT,做开发3年,先下车于平等寒共享单车店,做后台开发!

 

 我开始了一个公众号,欢迎各位有志同道合朋友,关注!不期分享工作,和自身得故事!

 

澳门葡京 10

 

 

 

 

 

  style=”color: #ff0000;”>恳请随意打赏

 

style=”font-size: 16px;”> 澳门葡京 11

(微信扫码)


 

 

 

 

 

 

 

 

 

 



如出一辙、 style=”color: #ff6600;”>前沿||潜心修心,学无止尽。生活如此,coding亦然。本人鸟窝,一单单正在求职的禽。联系自身得一直微信:jkxx123321

仲、 style=”color: #0000ff;”>项目总

style=”font-size: 16px; color: #0000ff;”>  **||**章参考资料:1. 
http://blog.csdn.net/u011272795/article/details/73824558   

style=”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;”>澳门葡京 12

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;”>澳门葡京 13

 

style=”font-size: 16px;”>对之第三正在要生要求的,请让本人联络,联系方式文章首页给有。

拖欠文章频频与新…喜欢的请关注…


随地和新
style=”font-size: 16px;”>今天介绍一下一个常用的地址选择组件,用sectionList做的连续地址:http://www.jianshu.com/p/09dd60d7b34f

效果图:

style=”font-size: 16px;”>澳门葡京 14

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;”>澳门葡京 15

 


不断和新

React
Native中点击输入文本框时,弹出来的键盘遮挡文本框的缓解方案!

效果图:

style=”font-size: 16px;”>澳门葡京 16

 

参考资料代码:

问题

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;”>澳门葡京 17澳门葡京 18


今天及新的是日历,日期选择组件

看图:

style=”font-size: 16px;”>澳门葡京 19澳门葡京 20

style=”font-size: 16px;”>参考资料:https://github.com/mmazzarolo/react-native-modal-datetime-picker

 

 

作者介绍:半路学IT,做开发3年,先下车于同等下共享单车店,做后台开发!

 

 我起了一个公众号,欢迎各位有志同道合朋友,关注!不期分享工作,和自己得故事!

 

澳门葡京 21

 

 

 

 

 

  style=”color: #ff0000;”>告随意打赏

 

style=”font-size: 16px;”> 澳门葡京 22

(微信扫码)


 

 

 

 

 

 

 

 

 

 

 

 

相关文章