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

Question

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

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

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

我尝试制作一个组件，返回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。