當(dāng)父組件使用 Flexbox 布局芹枷，并且具有特定的屬性設(shè)置時疏旨，子組件會在橫向自動鋪滿屏幕上荡。這種情況通常發(fā)生在以下場景：
父組件設(shè)置為 Flex 容器：首先哎壳，父組件必須是一個 Flex 容器毅待，這是通過在父組件上設(shè)置 display: flex 或在 React Native 中直接使用 Flexbox 布局的組件（如 View）來實(shí)現(xiàn)的。
Flex 方向設(shè)置為列（Column）：在父組件中归榕，設(shè)置 flexDirection 為 column尸红。這意味著子組件將沿著垂直方向排列。
子組件的寬度未顯式設(shè)置：子組件沒有設(shè)置固定的寬度或?qū)挾劝俜直取＿@允許子組件在寬度上自適應(yīng)外里。
子組件的 alignSelf 或父組件的 alignItems 屬性：如果父組件的 alignItems 設(shè)置為 stretch（這通常是默認(rèn)值）怎爵，或者子組件的 alignSelf 設(shè)置為 stretch，子組件將在交叉軸（在這種情況下是水平軸）上拉伸以填充父組件的寬度盅蝗。
示例代碼（React Native）：
import React from 'react';
import { View } from 'react-native';
const ParentComponent = () => {
return (
<View style={{ flex: 1, flexDirection: 'column' }}> {/* 父組件設(shè)置為 Flex 容器鳖链，方向?yàn)榱?*/}
<View style={{ height: 50, backgroundColor: 'blue' }} /> {/* 子組件會在橫向鋪滿屏幕 */}
{/* 更多子組件 */}
</View>
);
};
export default ParentComponent;
在這個例子中，ParentComponent 是一個 Flex 容器风科，其方向設(shè)置為 column。子組件（藍(lán)色視圖）沒有設(shè)置寬度乞旦，因此它會在橫向上自動鋪滿父容器的寬度贼穆。這是因?yàn)?alignItems 默認(rèn)為 stretch，導(dǎo)致子組件在交叉軸（這里是水平方向）上拉伸以匹配父容器的寬度兰粉。
為了解決這個問題故痊，可以用
<ButtonToggle
containerClassName="self-start"
leftSelected={
isManualTheme ? theme === "dark" : colorScheme === "dark"
}
textLeft="Dark"
textRight="Light"
toggle={(isLeftClick) => setTheme(isLeftClick ? "dark" : "light")}
/>
alignSelf 覆蓋父組件屬性
