React 和 React Native 之间 Flexbox 溢出行为的差异

Question

我是 React Native 的新手，所以如果这是一个简单的问题，我很抱歉。我正在尝试实现一种 Flex 布局，其中包含两个具有自己内容的子 Flex 容器，如果一个子容器的内容溢出，另一个子容器就会收缩。

我使用常规 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;

Answer 1

React Native 中的样式在很多方面与 Web 有所不同（有时，平台之间也是如此）。

其中之一是设定尺寸（您的身高）会覆盖

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;

React 和 React Native 之间 Flexbox 溢出行为的差异

问题描述投票：0回答：1

1个回答

最新问题

React 和 React Native 之间 Flexbox 溢出行为的差异

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1