react-native - 具有反应原生线性梯度的可重用组件

Question

我正在尝试制作一个具有线性渐变的可重用组件，可用于动态更改每个页面的主题/颜色，但我不断收到错误消息cannot read property of children undefined。

import React from 'react';
import LinearGradient from 'react-native-linear-gradient';




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

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

用法

import {GradientStyle} from '../../../styles/theme/GradientTheme'

const theme1 ={
    primary: '#4c669f',
    primaryGradient2: '#3b5998',
    primaryGradient1: '#192f6a'
}

    render() {
        return (

             <GradientStyle colors={theme1}>
                               .......content
            </GradientStyle>


        );
    }

标签： react-nativelinear-gradients

Answer 1

您不能this.props在功能组件中使用。您必须将其添加到解构参数中，如下所示：

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

然后，您可以创建一个GradientStyle这样的：

import {GradientStyle} from '../../../styles/theme/GradientTheme'

const theme1 ={
    primary: '#4c669f',
    primaryGradient2: '#3b5998',
    primaryGradient1: '#192f6a'
};

render() {
    return (
        <GradientStyle theme={theme1}></GradientStyle>
    );
}