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 :)
我正在使用 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 :)