React-Native屏幕适配之ImageView的应用解析

来源：互联网发布：网络安全工程师好考吗编辑：程序博客网时间：2024/04/29 22:26

前言

对于移动设备来讲，屏幕适配是必不可少的一个工作，但是对于Android和IOS两个平台，图片适配各不相同，那么在React Native中又是如何应用的呢？

Native适配方案

这里我们先说一下Android和IOS两大平台如何进行图片适配的。

1.Android

Android平台采用drawable文件夹区分不同分辨率的图片，android系统会自动区分当前手机的分辨率，并自动进行图片适配，同理也适用于各种布局layout文件。

2.IOS

IOS平台采用命名规则，即： @2x @3x的写法，系统同样会自动进行区分。

3.React Native

RN采用了IOS平台的适配方法，并且适用于Android平台。

RN适配方案测试

首先引入需要的图片，例如：

这里写图片描述

编写一个底部tab bar的切换，并引入需要尺寸的图片：

render() {        const { renderTab } = this.props;        return (            <TabNavigator                style={MainTabStyle.container}>                    <TabNavigator.Item                        style={MainTabStyle.item}                        title="笑话"                        selected={this.state.tab === 0}                        onPress={()=> this.handleSwitchTab(0)}                        renderIcon={() => <Image source={require('../../assets/images/home.png') }/>}                        renderSelectedIcon={() => <Image source={require('../../assets/images/home_filled.png')}/>}>                            {renderTab(0)}                    </TabNavigator.Item>                    <TabNavigator.Item                        style={MainTabStyle.item}                        title="图文"                        selected={this.state.tab === 1}                        onPress={()=> this.handleSwitchTab(1)}                        renderIcon={() => <Image source={require('../../assets/images/bookmark.png') }/>}                        renderSelectedIcon={() => <Image source={require('../../assets/images/bookmark_filled.png')}/>}>                            {renderTab(1)}                    </TabNavigator.Item>                    <TabNavigator.Item                        style={MainTabStyle.item}                        title="设置"                        selected={this.state.tab === 2}                        onPress={()=> this.handleSwitchTab(2)}                        renderIcon={() => <Image source={require('../../assets/images/bookmark.png') }/>}                        renderSelectedIcon={() => <Image source={require('../../assets/images/bookmark_filled.png')}/>}>                            {renderTab(2)}                    </TabNavigator.Item>            </TabNavigator>        );}

效果图：

这里写图片描述

1 0