在React Native中調整圖片大小

我正嘗試在我的反應原生應用中調整圖片大小（較小以適合屏幕），但無法做到這一點，因爲它太大了。在React Native中調整圖片大小

下面是代碼：

'use strict'; 

var React = require('react-native'); 
var { 
    StyleSheet, 
    Text, 
    TextInput, 
    View, 
    TouchableHighlight, 
    ActivityIndicatorIOS, 
    Image, 
    Component 
} = React; 

var styles = StyleSheet.create({ 
    description: { 
    marginBottom: 20, 
    fontSize: 18, 
    textAlign: 'center', 
    color: '#656565' 
    }, 
    container: { 
    padding: 30, 
    marginTop: 65, 
    alignItems: 'center' 
    }, 
    flowRight: { 
    flexDirection: 'row', 
    alignItems: 'center', 
    alignSelf: 'stretch' 
    }, 
    buttonText: { 
    fontSize: 18, 
    color: 'white', 
    alignSelf: 'center' 
    }, 
    button: { 
    height: 36, 
    flex: 1, 
    flexDirection: 'row', 
    backgroundColor: '#48BBEC', 
    borderColor: '#48BBEC', 
    borderWidth: 1, 
    borderRadius: 8, 
    marginBottom: 10, 
    alignSelf: 'stretch', 
    justifyContent: 'center' 
    }, 
    searchInput: { 
    height: 36, 
    padding: 4, 
    marginRight: 5, 
    flex: 4, 
    fontSize: 18, 
    borderWidth: 1, 
    borderColor: '#48BBEC', 
    borderRadius: 8, 
    color: '#48BBEC' 
    }, 
    image: { 
    width: 200, 
    height: 220 
    }, 
}); 

class SearchPage extends Component { 
    render() { 
    return (
     <View style={styles.container}> 

     <Image source={require('image!rclogo')} style={styles.image}/> 

     <Text style={styles.description}> 
      Search for RCers! 
     </Text> 

     <Text style={styles.description}> 
      Search 
     </Text> 

     <View style={styles.flowRight}> 
      <TextInput 
      style={styles.searchInput} 
      placeholder='Search by Batch, Name, Interest...'/> 
      <TouchableHighlight style={styles.button} 
       underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Go</Text> 
      </TouchableHighlight> 
     </View> 

     <TouchableHighlight style={styles.button} 
      underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Location</Text> 
     </TouchableHighlight> 

     </View> 
    ); 
    } 
}

我試圖把它拿出來的集裝箱電子標籤的，但似乎無法理解爲什麼它不能正常顯示？

這可以通過flexbox resizeMode完成嗎？你怎麼做呢？我找不到任何文檔...

來源

2015-04-06 rahul2001

這應該是工作。將寬度更改爲100時什麼都不會發生？另請參閱https://github.com/facebook/react-native/blob/master/Libraries/Image/Image.ios.js以獲取有關可用屬性的更多信息。 –

你試過'resizeMode：'cover''嗎？ – amit

是啊'resizeMode：'cover''沒有任何反應。 –

跑到同樣的問題，並能夠調整resize mode，直到我找到我很滿意的東西。替代的方法包括：

使用圖像編輯器降低Static Resource的大小
使用圖像編輯器
使用Network Resource在UX

的代價添加透明邊框的靜態資源

爲了防止調整圖像時質量損失考慮使用矢量圖形，以便您可以輕鬆地嘗試不同的大小。 Inkscape是免費工具，可以很好地用於此目的。

來源

2015-06-04 02:54:41

使用'cover'或'contains'調整大小模式，並設置圖像的高度和。

來源

2015-11-19 16:04:38

圖像的自動修復查看

image: { 
    flex: 1, 
    width: null, 
    height: null, 
    resizeMode: 'contain' 
}

來源

2016-10-07 05:28:45 shixukai

我調整自己回答有點（shixukai）

image: { 
    flex: 1, 
    width: 50, 
    height: 50, 
    resizeMode: 'contain' }

當我設置爲null，圖像不會顯示在所有。我設置成一定的規模像50

來源

2016-11-04 03:25:42

這爲我工作，圖像：{ 寬度：200，高度：220， resizeMode： '蓋' }

您還可以設置您的resizeMode：」包含'。我定義的風格適合我的網絡圖片爲：

如果您使用的柔性，在父視圖中的所有組件都使用它，否則它是多餘的高度：200，寬度：220。

來源

2017-03-10 07:12:09

嘗試一些組合後，我得到這個工作是這樣的：

image: { 
    width: null, 
    resizeMode: 'contain', 
    height: 220 
}

具體的順序。我希望這可以對某人有所幫助。（我知道這是一個古老的問題）

來源

2017-05-18 17:43:43

-1

這是我的解決方案，如果你知道寬高比，你可以從圖像元數據或先驗知識。這充滿了整個屏幕的寬度，但是，當然可以調整。

function imageStyle(aspect) 
    { 
    //Include any other style requirements in your returned object. 
    return {alignSelf: "stretch", aspectRatio: aspect, resizeMode: 'stretch'} 
    }

這看起來比contain更好一點，需要具備的大小若運用計謀，並調整高度，以保持適當的比例，使您的影像看上去不歪斜。使用contains可以保持寬高比，但會縮放以適應其他樣式要求，這可能會大幅縮小圖像。

來源

2017-05-26 20:58:58 samdoj

這爲我工作：

image: { 
    flex: 1, 
    aspectRatio: 1.5, 
    resizeMode: 'contain', 

    }

的aspectRatio只是寬度/高度（我的形象是45像素寬x 30像素高）。

來源

2017-06-22 21:49:27 GenericJam

在React Native中調整圖片大小

回答

相關問題