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

Ответы

Ответ 1

изображение автоматически фиксирует вид

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

Ответ 2

Я немного отрегулирую ваш ответ (shixukai)

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

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

Ответ 3

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

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

  }

aspectRatio - это просто ширина/высота (мое изображение имеет ширину 45 пикселей и высоту 30 пикселей).

Ответ 4

После некоторых комбинаций я получаю следующее:

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Просто нужно убедиться, что ширина и высота больше, чем вам нужно, так как это ограничено тем, что вы установили.

Ответ 7

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

image: {
    width: 200,
    height:220,
    resizeMode: 'cover'
}

Вы также можете установить свой resizeMode: 'contain'. Я определил стиль для своих сетевых образов:

<Image 
   source={{uri:rowData.banner_path}}
   style={{
     width: 80,
     height: 80,
     marginRight: 10,
     marginBottom: 12,
     marginTop: 12}}
/>

Если вы используете flex, используйте его во всех компонентах родительского View, иначе он избыточен с height: 200, width: 220.

Ответ 8

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

Ответ 9

В моем случае я не мог установить "ширину" и "высоту" на ноль, потому что я использую TypeScript.

Я исправил это, установив их на "100%":

backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',        
}

Ответ 10

{ flex: 1, resizeMode: 'contain' } работал для меня. Мне не нужно соотношение сторон

Ответ 11

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

Ответ 12

Попробуйте это: (для более подробной информации нажмите здесь)

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

Ответ 13

Вы можете использовать реагировать на собственное масштабируемое изображение

https://www.npmjs.com/package/react-native-scalable-image

  import Image from 'react-native-scalable-image';


     <View style={{width:200,height:200,overflow:'hidden'}}>
        <Image
          width={200} // height will be calculated automatically
          source={{uri: '<image uri>'}}
         />
     </View>

Ответ 14

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

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

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