前言

对于移动设备来讲，屏幕适配是必不可少的一个工作，但是对于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>
        );
}

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!