Изменение размера изображения в React Native

Question

Я пытаюсь изменить размер изображения (меньше, чтобы соответствовать экрану) в моем интерактивном приложении, но я не могу сделать это, поскольку он слишком велик.

Вот код:

'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? Как ты делаешь это? Я не могу найти никаких документов на нем ...

Answer 1

В этой же проблеме возникла проблема с настройкой resize mode, пока я не нашел что-то, чем я был доволен. Альтернативные подходы включают в себя:

• Уменьшить размер Static Resource с помощью редактора изображений
• Добавить прозрачную границу к статическому ресурсу с помощью редактора изображений
• Используйте Network Resource за счет UX

Чтобы предотвратить потерю качества при настройке изображений, рассмотрите возможность работы с векторной графикой, чтобы вы могли легко экспериментировать с разными размерами. Inkscape - бесплатный инструмент и хорошо работает для этой цели.

Answer 2

Использовать Resizemode с «обложкой» или «содержать» и установить высоту и с изображением.

Answer 3

изображение автоматически исправить View

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

Answer 4

настраивает свой ответ немного (shixukai)

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

Когда я установил в нуль, то изображение не будет отображено на всех. Я поставил на определенный размер, как 50

Answer 5

Это работает для меня, изображение: { ширина: 200, высота: 220, ResizeMode: 'крышка' }

Вы можете также установить ResizeMode:» содержат. Я определил стиль для моих сетевых образов, как:

Если вы используете флекс, использовать его во всех компонентах родительского вида, иначе он является излишним с высотой: 200, ширина: 220.

Answer 6

Попробовав несколько комбинаций, я получаю это работает так:

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

В частности, в указанном порядке. Надеюсь, это может быть полезно для кого-то. (Я знаю, что это старый вопрос)

Answer 7

Вот мое решение, если вы знаете соотношение сторон, которое вы можете получить из метаданных изображения или предварительного знания. Это заполняет всю ширину экрана, но это, конечно же, можно отрегулировать.

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

Это выглядит немного лучше, чем contain, и занимает меньше ловко с размерами, и он будет регулировать высоту, чтобы поддерживать правильное соотношение сторон, так что ваши изображения выглядят не перекошены. Использование содержания сохранит пропорции, но будет масштабировать его в соответствии с вашими другими требованиями стиля, которые могут резко уменьшить изображение.

Answer 8

Это работает для меня:

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

    } 

AspectRatio только ширина/высота (мое изображение 45px в ширину х 30 пикселей).