为什么视图会自动占据100%宽度？

Question

我试图将一个视图包含在另一个视图中，但封闭的视图占用了 100% 的宽度，即使我没有指定它。

我的主文件

import React from "react";
import { Text, View, Image } from "react-native";
import style from "../styles/screens/RegisterStyle";

export default function SignupRegisterScreen(props) {
  return (
    <View style={style.container}>
      <View style={style.step}>
        <Text style={style.stepText}>Step-1</Text>
      </View>
    </View>
  );
}

我的风格

import { StyleSheet } from "react-native";
import { scaleSize, scaleFont } from "../../theme/Mixins";

const style = StyleSheet.create({
  container: {
    backgroundColor: "#CBF4E7",
    flex: 1,
  },
  step: {
    backgroundColor: "white",
    paddingHorizontal: scaleSize(28),
    paddingVertical: scaleSize(4),
    borderRadius: scaleSize(20),
    marginTop: scaleSize(30),
  },
  stepText: {
    fontSize: scaleFont(16),
    lineHeight: scaleFont(19),
  },
});

export default style;

如何使视图只占据必要的宽度？

Answer 1

这是因为你的文字。所以如果你删除

<Text style={style.stepText}>Step-1</Text>

。宽度将设置为 0。因此

Text

组件影响父视图宽度的原因是因为您没有为父视图指定高度或宽度。因此，React Native 会自动使用其子容器（例如

Text

）来填充其高度和宽度。因此，如果增加文本的字体大小，父容器的高度就会增加。

Answer 2

将

alignSelf: 'flex-start'

添加到

step

的

StyleSheet

类中，以确保它只需要所需的宽度。像这样：

step: {
    backgroundColor: "white",
    paddingHorizontal: scaleSize(28),
    paddingVertical: scaleSize(4),
    borderRadius: scaleSize(20),
    marginTop: scaleSize(30),
    alignSelf: 'flex-start'
},