如何使用 React Native 为整个应用程序背景应用 react-native-linear-gradient

Question

我正在开发一个 React Native 应用程序。我可以通过将我的每一个容器组件包装成这样的东西来获得我想要的结果：

    <LinearGradient
      style={{ flex: 1 }}
      colors={[primary, primaryGradient2, primaryGradient1]}
      locations={locations}
    >
        <ContentHere></ContentHere>
    </LinearGradient>

我想做的是让我的项目保持干燥，而不必为每个容器级组件重复这样做。

我尝试制作一个组件，该组件使用我想要基于主题对象的正确配置返回 LinearGradient，如下所示：

<GradientTheme theme={theme}>
  <MainContainer>Stuff here </MainContainer>
</ GradientTheme>

但是，这会在没有任何 MainContainer 元素的情况下呈现。 GradientTheme 的代码如下：

import React from 'react';
import PropTypes from 'prop-types';
import LinearGradient from 'react-native-linear-gradient';

export const GradientTheme = ({ theme }) => {

const { primary, primaryGradient2, primaryGradient1, locations } = 
theme;
    return (
        <LinearGradient
            style={{ flex: 1 }}
            colors={[primary, primaryGradient2, primaryGradient1]}
            locations={locations}
        />
    );
};

GradientTheme.propTypes = {
    theme: PropTypes.object
};

只是一些额外的信息，我也在使用 React-Navigation。更理想的解决方案是采用一种全局方式来应用所有这些样式和主题。

Answer 1

但是，这会在没有任何 MainContainer 元素的情况下呈现。

你需要使用this.props.children

<LinearGradient
  style={{ flex: 1 }}
  colors={[primary, primaryGradient2, primaryGradient1]}
  locations={locations}>
  //add this:
  {this.props.children}
</LinearGradient>

它是一个使用开始和结束标签传递给所有组件的道具，包含开始和结束标签之间的任何内容。

我并不完全清楚您要完成什么，但我怀疑最好将 <GradientTheme/> 组件放置在应用程序的根目录或附近，并在本地管理主题它是父组件状态或redux。如果您需要，here 是一个很好的系列教程，介绍如何在 react-native 中同时使用 redux 和 react-navigation。