Разница в поведении переполнения флексбокса между React и React Native

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

Я добился того, чего хотел, используя обычный html/css:

Никакого переполнения контентом

С переполнением контента

но когда я воспроизвел те же элементы/стиль в React Native, другой дочерний элемент не сжимается, как я хочу:

Не сжиматься при переполнении контента

Может ли кто-нибудь объяснить, почему эти два разных? И как мне правильно реализовать это в React Native?

Вот как я реализовал это, используя простой HTML/CSS:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .container{ 
            width: 300px;
            height: 600px;
            display: flex;
            align-items: center;
            flex-direction: column;
            border: 2px solid black;
            padding: 30px;
        }

        .flexChild{
            padding: 15px;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;

        }

        .child1Content {
            border: 3px solid purple;
            height: 100px; /* CHANGE TO 400px FOR OVERFLOW */
            width: 300px;
        }

        .child2Content {
            border: 3px solid purple;
            height: 100px;
            width: 300px;
        }
    </style>
</head>
<body>
<div class = "container">
    <div class = "flexChild">
        <div class = "child1Content"></div>
    </div>
    <div class = "flexChild">
        <div class = "child2Content"></div>
    </div>
    </div>
</body>
</html>

А вот моя версия React Native:

import { SafeAreaView, StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style = {styles.container}>
      <View style = {styles.flexChild}>
          <View style = {styles.child1Content}>
          </View>
      </View>
      <View style = {styles.flexChild}>
          <View style = {styles.child2Content}>
          </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { 
    alignSelf: 'center',
    marginTop: 100,
    width: 300,
    height: 600,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    paddingTop: 30,
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: 'black',
  },
  flexChild: {
    padding: 15,
    flex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'black',

  },
  child1Content:{
    borderWidth: 3,
    borderStyle: 'solid',
    borderColor: 'purple',
    height: 100, // CHANGE TO 400px FOR OVERFLOW
    width: 300,
  },
  child2Content:{
    borderWidth: 3,
    borderStyle: 'solid',
    borderColor: 
    width: 300,
  }
});

export default App;

html css reactjs react-native flexbox

17.06.2024 06:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Стилизация в React Native во многом отличается от веб-стилизации (а иногда и между платформами).

Одна из них заключается в том, что заданный размер (ваш рост) имеет приоритет flex: 1. Кроме того, установка представлений двух братьев и сестер на flex: 1 приводит к тому, что братья и сестры имеют одинаковый размер. Вместо этого при использовании flexGrow: 1 при определении размера представления учитываются размеры внутреннего содержимого.

Другие изменения:

удалены некоторые ненужные стили, поскольку display: 'flex' и flexDirection: 'column' являются значениями по умолчанию в React Native
использовал alignSelf: 'stretch' для расширения просмотра по горизонтали
заменил границы на фоновый цвет, так как мне было легче их увидеть

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

import { SafeAreaView, StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style = {styles.container}>
      <View style = {[styles.flexChild, styles.flexChild1]}>
        <View style = {styles.child1Content}/>
      </View>
      <View style = {styles.flexChild}>
        <View style = {styles.child2Content} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    padding: 15,
  },
  flexChild: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow',
    padding: 15,
  },
  flexChild1: {
    backgroundColor: 'orange',
  },
  child1Content: {
    alignSelf: 'stretch', 
    backgroundColor: 'purple',
    height: 400, // CHANGE TO 400px FOR OVERFLOW
  },
  child2Content: {
    alignSelf: 'stretch',
    height: 100,
    backgroundColor: 'indigo',
  },
});

export default App;

Огромное спасибо, это было очень полезно!!

— 20.06.2024 08:01

19.06.2024 06:11