具有反应本机线性梯度的可重用组件

Question

我正在尝试制作一个具有线性渐变的可重用组件，可用于动态更改每个页面的 theme/color 但我一直收到错误 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>


        );
    }

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>
    );
}

具有反应本机线性梯度的可重用组件

reusable component with react-native linear gradient

linear-gradients

react-native