2016-05-28 11 views
0

Image.resizeModeを使用して、画像のサイズを変更してビューの内容に合わせる手順(https://facebook.github.io/react-native/docs/image.html)に従った。以下は私のコードです。Image.resizeModeが反応ネイティブで期待どおりに動作しない

import React, {Component} from 'react'; 
    import {View, Image,StyleSheet, Dimensions} from 'react-native' 
    import TabNavigator from 'react-native-tab-navigator'; 

    class MainComponent extends Component { 

    render() { 
     return (
      <TabNavigator tabBarStyle={style.tab}> 
       <TabNavigator.Item 

        title="护士说" 
        renderIcon={()=> <Image source={require('../../icons/main/tab-button_01_pre.png') } 
             resizeMode={Image.resizeMode.cover}/>} 

        > 
       </TabNavigator.Item> 


      </TabNavigator> 

     ) 
    } 
} 

const screenHeight = Dimensions.get('window').height; 

const style=StyleSheet.create({ 
    tab: { 
     alignSelf: 'stretch', 
     height: screenHeight * 0.1 
    } 
}) 


export default MainComponent 

以下は、私のアプリケーションのスクリーンショットです。下の画像がクリップされました。 Image.resizeModeをImage.resizeMode.cover、Image.resizeMode.contain、Image.resizeMode.stretchにしようとしました。それらのすべては、イメージを表示する上で異なるものはありません。私のコードに何が間違っていますか?タブバーの高さに合わせて画像サイズを設定するにはどうすればよいですか?私は画像の高さは、ナビゲーションアイテムよりも大きいことがわかったビューのレイアウトを確認するためにuiautomatorviewerを使用した後

enter image description here

答えて

0

。画像上に以下のようなスタイルを追加すると、今すぐ動作します。

image: { 

    height: screenHeight * 0.05 
} 
関連する問題