当父组件使用 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 覆盖父组件属性
