react native进阶_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > react native进阶

react native进阶

2017/9/5 3:09:05 郭东生blog 程序员俱乐部我要评论(0)

摘要：一、前沿||潜心修心，学无止尽。生活如此，coding亦然。本人鸟窝，一只正在求职的鸟。联系我可以直接微信：jkxx123321二、项目总结**||**文章参考资料：1.http://blog.csdn.net/u011272795/article/details/738245582.http://blog.csdn.net/qq_25280063/article/details/522942211）px2dp详细总结现在的手机品牌和型号越来越多
标签：

一、前沿||潜心修心，学无止尽。生活如此，coding亦然。本人鸟窝，一只正在求职的鸟。联系我可以直接微信：jkxx123321

二、项目总结

　　**||**文章参考资料：1. http://blog.csdn.net/u011272795/article/details/73824558

　　　　　　　　　　　2.http://blog.csdn.net/qq_25280063/article/details/52294221

1）px2dp详细总结

现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，

比如我们的设计稿一个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;
}
因为一般的设计稿都是以iphone6为基础来设计的，所以这里以iPhone6为基础写这个工具类，

当然如果你的不是，可以在上面更改，defaultPixelRatio改成你用的设备像素就好了。

我们这里对文字和尺寸进行了适配。

看一下同样的代码在不同手机的显示效果：

代码：
export default class Home extends React.Component {

    render() {

        return (
            <View>
                <Text style={{fontSize: 30}}>没适配,本机像素：{PixelRatio.get()}</Text>
                <Text style={{fontSize: ScreenUtil.setSpText(30)}}>已适配</Text>
                <View style={{
                    height: 50, width: 240, backgroundColor: 'green'
                }}></View>
                <View style={{
                    height: ScreenUtil.scaleSize(50),
                    width: ScreenUtil.scaleSize(240),
                    backgroundColor: 'red'
                }}></View>

            </View>
        )
    }

}
这里，我用了像素为1.5和2.65的2个安卓设备来进行展示：

logs.com/blog/1106982/201708/1106982-20170822224631105-1287112314.png" alt="">

如图：左侧是大屏，右侧是小屏手机。

第一行都是大小为30px的文字，因为屏幕本身的原因，导致看起来可能大小不同，但其实这是相同的大小文字。

而第二行我们适配过的看以看到，在大屏上(相对于iPhone6)，30px进行了放大，而小屏上则进行了缩小的操作。

这样，在不同设备上，就会显示合适的字体大小。

下面的View也是一样的道理，都进行了不同程度的缩小。

该文章持续跟新...喜欢的请关注...

持续更新

今天向大家介绍一个组件（我觉得还不错的组件，感谢情书哥为我找到）

参考资料：https://github.com/nicinabox/react-native-line-gauge

对这个第三方如果有需求的，请于我沟通，联系方式文章首页给出。

该文章持续跟新...喜欢的请关注...

持续跟新
今天介绍一下一个常用的地址选取组件，用sectionList做的连接地址:http://www.jianshu.com/p/09dd60d7b34f

效果图：

另外，如果想跟多了解flatlist和sectionlist，请去下面两位个人的博客去看：

ReactNative分组列表SectionList使用详情及示例详解:

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

资料：https://github.com/reactnativecomponent/react-native-netease-im

持续跟新

React Native中点击输入文本框时，弹出来的键盘遮挡文本框的解决方案！

效果图：

参考资料代码：

system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; white-space: normal; margin-top: 0px !important">问题

iOS：输入框获取焦点时，弹出的键盘会遮挡视图区域。

疑问：是在上层遮挡，还是同层压缩了视图容器的高度导致的？

Android：输入框获取焦点时，键盘区域会压缩视图高度（屏幕高度 - 键盘高度），不同的视图容器内处理情况不一样。

在 ScrollVIew 上打开键盘时，会自动根据当前输入框是否被键盘挡住来滚动视图；

在 View 上打开键盘时，视图内容略微上移，由于视图高度被压缩，超出视图的内容显示不出来；

解决方案

解决 View 组件的键盘遮挡问题

使用场景

类似雪球的登录界面（View），上半部分是图片，下半部分是登录表单。在表单输入框获取焦点时，键盘占据屏幕下半部分，并压缩上方的图片高度，以解决键盘遮挡输入框问题。

实现方式

react-native-keyboard-spacer

...

解决 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

请随意打赏

(微信扫码)