react native进阶



一、 style=”color: #ff6600;”>前沿||潜心修心,学无止尽。生活这么,coding亦然。本身鸟窝,二头正在求职的鸟。联系自个儿能够直接微信:jkxx1233二一

二、 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

 一)px②dp详细计算

style=”font-size: 1陆px;”>未来的手提式有线话机品牌和型号更加多,导致大家一向写布局的时候会在个不等的移动设备上展现的效劳区别,

style=”font-size: 1陆px;”>举个例子大家的设计稿贰个View的分寸是300px,倘若直白写300px,或许在眼下配备展现符合规律,但到了其余道具恐怕就会偏小照旧偏大,那就须要大家对显示屏实行适配。Android原生的话有本身的适配规则,能够依靠区别的尺寸建立分化的文本夹,系统会依附当前的设施尺寸取对应的大大小小的布局。而XC60N本身并未适配规则,而原生的又相比较反锁,那就需求大家和好去对荧屏实行适配。

先看一下刚出炉的显示屏适配工具类:

 

/**
 * Created by zhuoy on 2017/6/27.
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */

/
设备的像素密度,比如:
PixelRatio.get() === 一 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 壹.伍 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 二 中兴 4, 4S,HTC 5, 伍c, 5s,魅族 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 三 索爱 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 三.伍 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 = 二; //iphone陆的像素密度
//px转变到dp
const w2 = 750 / defaultPixel;
const h二 = 133四 / defaultPixel;
const scale = Math.min(deviceHeight / h2, deviceWidth / w二); //获取缩放比例
/**

 * 设置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: 1陆px;”>因为一般的设计稿都以以iphone六为底蕴来规划的,所以那里以中兴6为根基写这么些工具类,

style=”font-size: 1陆px;”>当然要是您的不是,能够在地点更换,defaultPixelRatio改成你用的设施像素就好了。

笔者们那里对文字和尺寸实行了适配。

style=”font-size: 16px;”>看一下一样的代码在分裂手机的体现效果:

代码:

 

export default class Home extends React.Component {

render() {

return (

没适配,本机像素:{PixelRatio.get()}
已适配




)
}

}

 

style=”font-size: 16px;”>那里,笔者用了像素为一.5和二.65的三个安卓设备来进展体现:

style=”font-size: 16px;”>图片 1

style=”font-size: 1陆px;”>如图:左边是大屏,右边是小屏手机。

style=”font-size: 1陆px;”>第3行都以大大小小为30px的文字,因为荧屏自身的原因,导致看起来只怕大小区别,但实质上那是千篇1律的轻重缓急文字。

style=”font-size: 1陆px;”>而第二行咱们适配过的看以观察,在大屏上(相对于黑莓陆),30px实行了推广,而小屏上则开展了紧缩的操作。

style=”font-size: 16px;”>这样,在分裂道具上,就会显得合适的字体大小。

 

上面的View也是同样的道理,都进展了差异程度的压缩。

该小说频频跟新…喜欢的请关心…

 


 


 

连发立异

style=”font-size: 1陆px;”>今日向我们介绍一个零件(作者觉得还不易的组件,谢谢表白信哥为本身找到)

style=”font-size: 1陆px;”>参考资料:https://github.com/nicinabox/react-native-line-gauge

style=”font-size: 16px;”>图片 2

 

style=”font-size: 1陆px;”>对那个第2方就算有须要的,请于小编关系,联系情势文章首页给出。

该小说频频跟新…喜欢的请关怀…


频频跟新
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: 1陆px;”>iOS:输入框获取关节时,弹出的键盘会遮挡视图区域。

style=”font-size: 16px;”>疑问:是在上层遮挡,依然同层压缩了视图容器的冲天导致的?

style=”font-size: 1六px;”>Android:输入框获取关节时,键盘区域会缩减视图高度(显示屏中度

  • 键盘中度),分化的视图容器内部处理理情形不一致样。

  • 在 ScrollVIew
    上展开键盘时,会自动依据方今输入框是还是不是被键盘挡住来滚动视图;

  • 在 View
    上开垦键盘时,视图内容略微发展,由于视图中度被压缩,超越视图的内容展示不出去;

缓和方案

消除 View 组件的键盘遮挡问题

动用处境

style=”font-size: 16px;”>类似雪球的记名分界面(View),上半部分是图片,下半部分是登入表单。在表单输入框获取关节时,键盘占有荧屏下半有个别,并减少上方的图样中度,以化解键盘遮挡输入框难点。

金玉满堂方式

解决 ScrollView 组件的键盘遮挡难点

运用处境

在 ScrollView / ListView 组件内部设有
TextInput
组件,须求输入框获取关节时,视图容器自动调治滚动中度,确定保证输入框出现在键盘上方。

达成情势:

  • style=”font-size: 16px;”>KeyboardAvoidingView

    React Native 提供的零件,但须要react-native 版本大于等于 0.2九

  • 使用 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
    出现前的早起化解方案(不存在版本限制?)。

 跟新时间 :20一柒年10月20日2二:贰4:00

style=”font-size: 1陆px;”>补充1种用<ScrollView>完毕此意义demo:http://www.jianshu.com/p/fb7c718a8d9a

效果图:

style=”font-size: 16px;”>图片 6图片 7


昨天跟新的是日历,日期选择组件

看图:

style=”font-size: 16px;”>图片 8图片 9

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

 

 

小编介绍:半路学IT,做开垦三年,先下车在一家共享单车公司,做后台开荒!

 

 小编开了多个公众号,招待各位有志同道合朋友,关怀!不定期分享工作,和自身得传说!

 

图片 10

 

 

 

 

 

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

 

style=”font-size: 16px;”> 图片 11

(微信扫码)


 

 

 

 

 

 

 

 

 

 



1、 style=”color: #ff6600;”>前沿||潜心修心,学无止尽。生活这么,coding亦然。本人鸟窝,贰头正在求职的鸟。联系我能够直接微信:jkxx1233二一

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

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

style=”font-size: 16px; color: #0000ff;”>           2.http://blog.csdn.net/qq\_25280063/article/details/52294221

 一)px贰dp详细总计

style=”font-size: 16px;”>未来的无绳电话机品牌和型号越多,导致我们平时写布局的时候会在个例外的活动器具上出示的机能分化,

style=”font-size: 1陆px;”>比如大家的设计稿三个View的大大小小是300px,若是直接写300px,大概在近来设备呈现寻常,但到了其余装置恐怕就会偏小可能偏大,那就须要大家对显示器实行适配。Android原生的话有谈得来的适配规则,能够依据不一致的尺码建立不一致的文书夹,系统会基于当下的装置尺寸取对应的轻重缓急的布局。而途乐N自身并未有适配规则,而原生的又相比较反锁,那就须求我们自个儿去对显示器举行适配。

先看一下刚出炉的显示屏适配工具类:

 

/**
 * Created by zhuoy on 2017/6/27.
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */

/
设备的像素密度,比方:
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 一.五 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 诺基亚 四, 四S,魅族 5, 五c, 伍s,Nokia 六,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 三 魅族 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 三.5 Nexus 陆
/

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 = 贰; //iphone六的像素密度
//px转换到dp
const w2 = 750 / defaultPixel;
const h二 = 133四 / defaultPixel;
const scale = Math.min(deviceHeight / h2, deviceWidth / w二); //获取缩放比例
/**

 * 设置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为根基来安插的,所以那里以摩托罗拉六为底蕴写这么些工具类,

style=”font-size: 1六px;”>当然如若您的不是,能够在下面改变,defaultPixelRatio改成你用的装置像素就好了。

大家那边对文字和尺寸进行了适配。

style=”font-size: 1陆px;”>看一下一样的代码在分裂手提式有线话机的来得效果:

代码:

 

export default class Home extends React.Component {

render() {

return (

没适配,本机像素:{PixelRatio.get()}
已适配




)
}

}

 

style=”font-size: 1六px;”>这里,作者用了像素为一.5和2.陆伍的1个安卓设备来开始展览体现:

style=”font-size: 16px;”>图片 12

style=”font-size: 1陆px;”>如图:左边是大屏,右边是小屏手提式有线电话机。

style=”font-size: 16px;”>第三行都是大小为30px的文字,因为显示器自个儿的缘由,导致看起来或许大小不一,但实际上那是一律的大小文字。

style=”font-size: 16px;”>而第一行我们适配过的看以观看,在大屏上(绝对于黑莓陆),30px进行了拓宽,而小屏上则张开了压缩的操作。

style=”font-size: 1陆px;”>那样,在区别道具上,就会显示合适的字体大小。

 

上面包车型客车View也是平等的道理,都开始展览了区别档案的次序的紧缩。

该小说频频跟新…喜欢的请关怀…

 


 


 

频频更新

style=”font-size: 1陆px;”>昨天向大家介绍二个组件(笔者认为还行的零件,多谢表白信哥为笔者找到)

style=”font-size: 16px;”>参考资料:https://github.com/nicinabox/react-native-line-gauge

style=”font-size: 16px;”>图片 13

 

style=”font-size: 1陆px;”>对那个第1方借使有须求的,请于小编联系,联系格局小说首页给出。

该文章频频跟新…喜欢的请关切…


各处跟新
style=”font-size: 1陆px;”>先天牵线一下贰个常用的地点选取组件,用sectionList做的连接地址:http://www.jianshu.com/p/09dd60d7b34f

效果图:

style=”font-size: 16px;”>图片 14

style=”font-size: 1陆px;”> 别的,要是想跟多精通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: 1六px;”>iOS:输入框获取关节时,弹出的键盘会遮挡视图区域。

style=”font-size: 1陆px;”>疑问:是在上层遮挡,依然同层压缩了视图容器的万丈导致的?

style=”font-size: 1陆px;”>Android:输入框获取关节时,键盘区域会削减视图中度(显示屏中度

  • 键盘中度),分化的视图容器内部处理理状态不均等。

  • 在 ScrollVIew
    上开荒键盘时,会活动依照当下输入框是不是被键盘挡住来滚动视图;

  • 在 View
    上展开键盘时,视图内容略微发展,由于视图中度被减少,超越视图的剧情彰显不出来;

化解方案

消除 View 组件的键盘遮挡难点

动用景况

style=”font-size: 1陆px;”>类似雪球的登6分界面(View),上半部分是图形,下半部分是登入表单。在表单输入框获取关节时,键盘攻下荧屏下半局部,并压缩上方的图样中度,以缓慢解决键盘遮挡输入框难点。

贯彻格局

化解 ScrollView 组件的键盘遮挡问题

运用意况

在 ScrollView / ListView 组件内部设有
TextInput
组件,必要输入框获取关节时,视图容器自动调治滚动中度,确认保证输入框出现在键盘上方。

落到实处格局:

  • style=”font-size: 16px;”>KeyboardAvoidingView

    React Native 提供的零件,但供给react-native 版本大于等于 0.2九

  • 使用 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
    出现前的早起化解方案(不设有版本限制?)。

 跟新时间 :201七年六月十一日2二:二四:00

style=”font-size: 16px;”>补充1种用<ScrollView>完毕此功能demo:http://www.jianshu.com/p/fb7c718a8d9a

效果图:

style=”font-size: 16px;”>图片 17图片 18


今日跟新的是日历,日期采用组件

看图:

style=”font-size: 16px;”>图片 19图片 20

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

 

 

作者介绍:半路学IT,做开采叁年,先下车在一家共享单车公司,做后台开拓!

 

 小编开了1个公众号,应接各位有志同道合朋友,关心!不按期分享职业,和自己得轶事!

 

图片 21

 

 

 

 

 

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

 

style=”font-size: 16px;”> 图片 22

(微信扫码)


 

 

 

 

 

 

 

 

 

 

 

 

相关文章