时间戳

首页 > 解决方案 > 在 React Native 中使用高度设置背景颜色

css - 在 React Native 中使用高度设置背景颜色

问题描述

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

标签： cssreact-native

解决方案

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

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-native Linear Gradient 来实现漂亮的颜色混合，但您必须将组件包装在<LinearGradient></LinearGradient>组件中

推荐阅读