时间戳

首页 > 解决方案 > 为什么视图会自动占用 100% 的宽度？

react-native - 为什么视图会自动占用 100% 的宽度？

问题描述

我试图将一个视图包含在另一个视图中，但是即使我没有指定它，封闭的视图也占用了 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;

如何使视图仅占用必要的宽度？

标签： react-native

解决方案

这是因为你的文字。因此，如果您删除<Text style={style.stepText}>Step-1</Text>. 宽度将设置为 0。所以Text组件影响父视图宽度的原因是因为您没有为父视图指定高度或宽度。所以 react native 会自动使用它的子容器Text来填充它的高度和宽度。所以，如果你增加文本的字体大小，父容器的高度就会增加。

推荐阅读