如何使用 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。如果您需要，这里有一系列关于在 React-Native 中一起使用 Redux 和 React-Navigation 的精彩教程。