在React Native中设置具有高度的背景色

Question

我想在应用程序的一个屏幕上设置两种不同的背景色。我希望背景的高度/2.3为#F7E3E5，底部为#000000。我可以在css样式表中为height属性指定条件吗？我不想使用不同的视图。我想知道这是否可能从一个完整的容器造型。

Answer 1

我重读了你的问题。据我所知，视图组件只能应用一种颜色，因此您可以执行以下操作：

const Wrapper = styled.View`
flex:1;
background-color: #F7E3E5;
align-items: flex-end;
`;
const LowerContainer = styled.View`
height: ${FULL_HEIGHT /2.3}px;
background-color: #000000;
`;
return (
<Wrapper>
<LowerContainer>
**SomeElements**
</LowerContainer>
</Wrapper>

这会给你一些像你要求的东西，但颜色非常粗糙。您可以使用React原生线性渐变来实现良好的颜色混合，但您必须将组件包裹在<LinearGradient></LinearGradient>组件中