3

我已经被困了一段时间，试图弄清楚我在这里做错了什么，我觉得我已经尝试了我找到的所有解决方案，但它不起作用。为了描述正在发生的事情，我制作了最简单的组件来展示正在发生的事情。

这是我的主题

export default const theme = {
    colors: {
        white: '#FFFFFF',
        black: '#000',
        lightGray: '#f0f2f1',
        darkGray: '#909190',
        primaryColor: '#007772',
        secondaryColor: '#0775BC',
        textColor: '#231F20',
        lightPrimary: '#DBFFFF',
        red: '#B80F0A',
        primaryHalf: '#7FBAB8',
    },
    font: {
        family: 'Nunito-Regular',
    },
};

这是我的组件

import React from 'react';
import styled from 'styled-components/native';

const Wrapper = styled.View`
    background-color: ${(props) => props.theme.colors.white};
`;

const TestSimpleComponent: React.FC = ({ children }) => {
    return <Wrapper>{children}</Wrapper>;
};

export default TestSimpleComponent;

很简单，只是用来自主题的白色背景包裹一些东西。

最后，这是我的简单测试

import React from 'react';
import { Text } from 'react-native';
import { render } from '@testing-library/react-native';

import TestSimpleComponent from './TestSimpleComponent';
import { ThemeProvider } from 'styled-components';
import theme from '../../themes/primary';

describe('TestSimpleComponent', () => {
    it('displays correct children', () => {
        const { queryByText } = render(
            <ThemeProvider theme={theme}>
                <TestSimpleComponent>
                    <Text>Test</Text>
                </TestSimpleComponent>
            </ThemeProvider>,
        );
        expect(queryByText('Test')).not.toBeNull();
    });
});

这是抛出的错误。基本上说主题提供者没有将主题传递给组件，原因我似乎无法弄清楚。

TypeError: Cannot read property 'white' of undefined

      3 | 
      4 | const Wrapper = styled.View`
    > 5 |     background-color: ${(props) => props.theme.colors.white};
        |                                                       ^
      6 | `;
      7 | 
      8 | const TestSimpleComponent: React.FC = ({ children }) => {

我觉得我已经尝试了我在这里找到的所有东西，人们遇到了同样的问题，但似乎没有任何效果。唯一可行的是我手动将主题传递给 Wrapper，这不是一个可行的解决方案，因为我有一个大型应用程序，它在所有地方都使用样式组件中的主题。

每当我之前使用颜色文件时，我的所有测试都通过了，但是一旦我将它切换到主题，一切都坏了

我也尝试了这里引用的所有内容。

有谁知道我可能做错了什么？

4

1 回答 1

4

以防万一有人想知道答案是什么。我遇到的问题的解决方案正在改变

import { ThemeProvider } from 'styled-components';

至

import { ThemeProvider } from 'styled-components/native';
于 2021-06-01T21:15:36.517 回答