Question

我是React Native的新手。我试图将徽标放置在导航栏的右侧，但是尝试此操作时，它对我不起作用，我也不明白为什么。

export const LogosStyles = StyleSheet.create({
    navbar: {
        flex: 1,
        flexDirection: "row",
    },
    LogoAddSquare: {
        width: 24,
        height: 24,
        marginLeft: 'auto',
        // position: 'absolute', //none of these worked
        // right: 0,
        // alignItems: "flex-end",
        // justifyContent: "flex-end", 
    },
})

也尝试了内联样式，尽管绝对和正确可以在控制台上提供我需要的结果，但什么也没做

export function Dashboard(props) {
    const [showSidebar, setSidebar] = useState(true)

    return <Row style={DashboardStyles.main}>
        {showSidebar && <Sidebar>
            {props.menuItems.map(item =>
                <SidebarItem {...item} key={item.to} />
            )}
        </Sidebar>}

        <Column style={DashboardStyles.main}>
            <ProfileBar>
                <View style={LogosStyles.navbar}>
                    {<LogoArrowLeft />}
                    <CheckBox
                        label="Menu"
                        checked={showSidebar}
                        onChange={setSidebar}
                    />
                    {<LogoAddSquare
                        style={LogosStyles.LogoAddSquare}
                        /* style={{ position: "absolute", right: 0 }} */ />} 
                </View>

            </ProfileBar>
            {props.children}
        </Column>
    </Row>
}

Answer 1

要实现这一点，我们需要为父元素提供以下样式

尝试如下，

navbar: {
   flex: 1,
   flexDirection: "row",
   justifyContent: "flex-end", // This will move your logo horizontally in right direction
   alignItems: "flex-end", // This will move your logo vertically in down direction, You can give "center" to look nice
},
LogoAddSquare: {
   width: 24,
   height: 24,
}

Answer 2

我能够通过添加一个空的View类来实现此目的，该类需要为每个组件定义（React-Native中没有继承性）。我试图将justify-content应用于一个太空的元素中，因为React-Native中的所有内容都位于FlexBox中，因此我需要Flex来定义元素的比例。

        <Row style={DashboardStyles.main}>
            {showSidebar && <Sidebar>
                {props.menuItems.map(item =>
                    <SidebarItem {...item} key={item.to} />
                )}
            </Sidebar>}

            <Column style={DashboardStyles.main}>
                <ProfileBar>
                    {<LogoArrowLeft />}
                    <CheckBox
                        label="Menu"
                        checked={showSidebar}
                        onChange={setSidebar}
                    />
                    <Flex /> {/* This is a shortcut equivalent of 
                              <View style={{flex: 1}} />  that was set up 
                              for this purpose (with a ratio 1:1) */}

                    {<LogoAddSquare
                        style={LogosStyles.LogoAddSquare} />}

                </ProfileBar>
                {props.children}
            </Column>
        </Row>

在React Native View组件中应用样式

2 个答案: