Как вы вписываете изображение в React Native?

// Как разместить изображение в верхней части экрана без потери соотношения сторон?

[![import React, { Component } from 'react';
    import { AppRegistry, View, Image, StyleSheet } from 'react-native';
    export default class DisplayAnImageWithStyle extends Component {
      render() {
        return (
          <View style = {{flex:1}}>
            <Image
              resizeMode = "contain"
              style = {{flex:1}}
              source = {{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
            />
          </View>
        );
      }
    }

    // Skip these lines if you are using Create React Native App.
    AppRegistry.registerComponent(
      'DisplayAnImageWithStyle',
      () => DisplayAnImageWithStyle
    );][1]][1]

// Здесь понравившееся изображение показывает, что оно не подходит... оно не видно сверху... у вас есть идеи, как я могу установить изображение без каких-либо отступов? [1]: https://i.stack.imgur.com/LYNKn.png

Что вы имеете в виду, «как установить изображение в верхней части экрана без потери соотношения сторон»? выровнено сверху?

— 03.03.2019 18:07

да, выравнивание по верхнему краю, когда я устанавливаю resizeMode = "contain", оно помещает изображение в центр, но я хочу выровнять его по верхнему краю. Пожалуйста, есть идеи?

— 03.03.2019 18:31

Я не уверен, добавлю ли style = {{flex:1, width: null, height: null}} в справку по изображениям.

— 04.03.2019 07:38

react-native

03.03.2019 18:01

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

Ответы 1

Так что вы можете использовать resizeMode: 'cover' с высотой и шириной.

<Image
  resizeMode = "contain"
  style = {{ width: 200, height:220, resizeMode: 'cover'}}
  source = {{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
 />

Вот пример https://snack.expo.io/HJTFg9tU4

Дайте мне знать, если это работает для вас.

03.03.2019 18:05