React-Native螢幕適配之ImageView的應用解析
阿新 • • 發佈:2019-01-06
前言
對於移動裝置來講,螢幕適配是必不可少的一個工作,但是對於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>
);
}
效果圖: