前言

對於移動裝置來講，螢幕適配是必不可少的一個工作，但是對於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>
        );
}

效果圖：