在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完成吗？你怎么做呢？我找不到任何文档...

这应该是工作。将宽度更改为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是免费工具，可以很好地用于此目的。

答

使用'cover'或'contains'调整大小模式，并设置图像的高度和。

答

图像的自动修复查看

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

答

我调整自己回答有点（shixukai）

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

当我设置为null，图像不会显示在所有。我设置成一定的规模像50

答

这为我工作，图像：{ 宽度：200，高度：220， resizeMode： '盖' }

您还可以设置您的resizeMode：”包含'。我定义的风格适合我的网络图片为：

如果您使用的柔性，在父视图中的所有组件都使用它，否则它是多余的高度：200，宽度：220。

答

尝试一些组合后，我得到这个工作是这样的：

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

具体的顺序。我希望这可以对某人有所帮助。（我知道这是一个古老的问题）

答

这是我的解决方案，如果你知道宽高比，你可以从图像元数据或先验知识。这充满了整个屏幕的宽度，但是，当然可以调整。

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

这看起来比contain更好一点，需要具备的大小若运用计谋，并调整高度，以保持适当的比例，使您的影像看上去不歪斜。使用contains可以保持宽高比，但会缩放以适应其他样式要求，这可能会大幅缩小图像。

答

这为我工作：

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

    }

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

在React Native中调整图片大小

相关推荐