Компоненты в стиле оригинала реагируют не работают должным образом. Нужна помощь в создании автоматически изменяемого размера изображения на основе родительского контейнера. - PullRequest
Новая
       20

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

0 голосов
/ 11 октября 2019

Мне нужно создать компоненты изображения с автоматическим изменением размера на основе родительского контейнера, не сжимая изображение (оно должно поддерживать соотношение сторон изображения) и должно быть выровнено по левому краю. Но в реагирующем Native я использовал режим изменения размера как «содержащий», размер изображения автоматически изменяется, но я не могу отобразить изображение как выровненное по левому краю.

Но в простом HTML & CSS я смог добитьсяэто просто, но те же стили не работают должным образом в React-Native.

Мне нужно, чтобы результат был похож на приведенный пример:

https://codesandbox.io/s/dark-forest-44upv

Но я 'я пытаюсь сделать то же самое в нативном реагировании:

https://codesandbox.io/s/react-native-1mu8w

Ожидаемый результат, полученный при использовании CSS: 

<!DOCTYPE html>
<html>
  <head>
    <title>cell padding</title>
    <style>
      .gfg {
        width: 600px;
        height: 200px;
        background-color: powderblue;
        overflow: hidden;
      }
      img {
        height: 100%;
        width: auto;
      }
    </style>
  </head>
  <body>
    <div class="gfg">
      <img
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4t0Nrhw1Vboa5_AD7mqkzX36ncefzMM8Maomzofa7OWkLPkN7&s"
      />
    </div>
  </body>
</html>

То же самое в нативном реагировании, но не получение ожидаемогорезультат. 

import React, { Component } from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";
import styled from "styled-components/native";

class App extends Component {
  render() {
    return (
      <Container>
        <ImageCont
          accessibilityLabel="React logo"
          source={{
            uri:
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4t0Nrhw1Vboa5_AD7mqkzX36ncefzMM8Maomzofa7OWkLPkN7&s"
          }}
          //resizeMode="contain"
        />
      </Container>
    );
  }
}

const Container = styled.View`
  width: 600px;
  height: 200px;
  background-color: powderblue;
  overflow: hidden;
`;
const ImageCont = styled.Image`
  height: 100%;
  width: auto;
`;

export default App;

Заранее благодарен за помощь.

1 Ответ

0 голосов
/ 11 октября 2019 
    <ImageCont
              accessibilityLabel="React logo"
              source={{
                uri:
                  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4t0Nrhw1Vboa5_AD7mqkzX36ncefzMM8Maomzofa7OWkLPkN7&s"
              }}
style = {{flex:1}}
    />

Попробуйте задать стиль flex :1 для дочернего компонента

...