React Native:如何在滚动视图中居中视图

React Native: How to center view inside a Scrollview

我正在使用 React Native,但在尝试使视图居中时遇到了问题。视图一直停留在屏幕顶部。 contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' } 无效

这是我的style.js

export const Container = styled.View`
    flex: 1;
    background-color: ${empty};
`;

export const ImageBackgroundContainer = styled.ImageBackground`
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-top: ${StatusBarHeight + 10}px;
`;

export const ScrollViewContainer = styled.ScrollView`
    flex: 1;
    background-color: ${red};
    height: 100px;
    width: 100%;
`;

export const InnerContainer = styled.View`
    flex: 1;
    align-items: center;
    justify-content: center;
    background-color: ${white};
    border-radius: 25px
    padding: 20px;
`;

这是布局

const Signup = () => {
    return (
        <Container>
            <ImageBackgroundContainer resizeMode='cover' source={require('./../assets/LoginBackground.jpg')}>        
                <ScrollViewContainer contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' }}>
                    <InnerContainer>
                        <Text>Text Input Here</Text>
                    </InnerContainer>
                </ScrollViewContainer>
            </ImageBackgroundContainer>
        </Container>
    );
}

This is how the interface looks like

将 flex:1 添加到您的 contentContainerStyle :)