子组件在未设置宽度的情况下自动填满宽度

当父组件使用 Flexbox 布局，并且具有特定的属性设置时，子组件会在横向自动铺满屏幕。这种情况通常发生在以下场景：

父组件设置为 Flex 容器：首先，父组件必须是一个 Flex 容器，这是通过在父组件上设置 display: flex 或在 React Native 中直接使用 Flexbox 布局的组件（如 View）来实现的。

Flex 方向设置为列（Column）：在父组件中，设置 flexDirection 为 column。这意味着子组件将沿着垂直方向排列。

子组件的宽度未显式设置：子组件没有设置固定的宽度或宽度百分比。这允许子组件在宽度上自适应。

子组件的 alignSelf 或父组件的 alignItems 属性：如果父组件的 alignItems 设置为 stretch（这通常是默认值），或者子组件的 alignSelf 设置为 stretch，子组件将在交叉轴（在这种情况下是水平轴）上拉伸以填充父组件的宽度。

示例代码（React Native）：

import React from 'react';
import { View } from 'react-native';

const ParentComponent = () => {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}> {/* 父组件设置为 Flex 容器，方向为列 */}
      <View style={{ height: 50, backgroundColor: 'blue' }} /> {/* 子组件会在横向铺满屏幕 */}
      {/* 更多子组件 */}
    </View>
  );
};

export default ParentComponent;
在这个例子中，ParentComponent 是一个 Flex 容器，其方向设置为 column。子组件（蓝色视图）没有设置宽度，因此它会在横向上自动铺满父容器的宽度。这是因为 alignItems 默认为 stretch，导致子组件在交叉轴（这里是水平方向）上拉伸以匹配父容器的宽度。

为了解决这个问题，可以用

<ButtonToggle
           containerClassName="self-start"
           leftSelected={
             isManualTheme ? theme === "dark" : colorScheme === "dark"
           }
           textLeft="Dark"
           textRight="Light"
           toggle={(isLeftClick) => setTheme(isLeftClick ? "dark" : "light")}
         />

alignSelf 覆盖父组件属性