當父組件使用 Flexbox 布局，并且具有特定的屬性設置時，子組件會在橫向自動鋪滿屏幕。這種情況通常發(fā)生在以下場景：

父組件設置為 Flex 容器：首先，父組件必須是一個 Flex 容器，這是通過在父組件上設置 display: flex 或在 React Native 中直接使用 Flexbox 布局的組件（如 View）來實現(xiàn)的。

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 覆蓋父組件屬性