TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function

Question

我使用 expo-cli 创建了一个 react-native 应用程序，但让我对连接样式感到困惑。

node version: v15.14.0; npm version: 7.19.1; expo version: 4.8.1

代码如下，

import styled from 'styled-components';
import {View, Text, Image, TextInput, TouchableOpacity} from 'react-native';
import Constants from 'expo-constants';

const StatusBarHeight = Constants.statusBarHeight;

//colors
export const Colors={
          primary: '#ffffff',
          secondary: '$E5E7EB',
          tertiary: '#1F2937',
          darkLight: '#9CA3AF',
          brand: '#6D28D9',
          green: '#10B981',
          red: '#EF4444',
};

const { primary, secondary, tertiary, darkLight, brand, green, red } = Colors;

export const StyledContainer = styled.View`
          flex: 1;
          padding: 25px;
          padding-top: ${StatusBarHeight + 10}px;
          background-color: ${primary};
`

错误：

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function
Module.../../../../../../../../../home/imdadul/Documents/CovidVisa/components/styles.js
/home/imdadul/Documents/CovidVisa/components/styles.js:20
  17 | 
  18 | const { primary, secondary, tertiary, darkLight, brand, green, red } = Colors;
  19 | 
> 20 | export const StyledContainer = styled.View`
  21 |           flex: 1;
  22 |           padding: 25px;
  23 |           padding-top: ${StatusBarHeight + 10}px;

请注意附件显示错误截图，

我会感激那些帮助过我并努力帮助过我的人。 非常感谢！

Answer 1

请做

import styled from 'styled-components/native'

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function

javascript

mobile-application

react-native

expo