TypeError: undefined is not a function (in '...styled Components.default.button...')

Posted 2023-03-15

【中文标题】TypeError: undefined is not a function (in \'...styled Components.default.button...\')

【英文标题】：TypeError: undefined is not a function (near '..._styledComponents.default.button...')TypeError: undefined is not a function (in '...styled Components.default.button...')

【发布时间】：2021-11-12 00:49:01

【问题描述】：

我在 react native 项目中使用 styled-components 时遇到此错误。

TypeError: undefined is not a function (near '..._styledComponents.default.button...')

这是我的代码；

import styled from "styled-components";
const Buttonn = styled.button`
  background: white;
  width: 200px;
  height: 50px;
  bordercolor: black;
  font-size: 24px;
  color: black;
  text-align: center;
  &:hover 
    background: black;
    color: white;
  
`;

function CourierDetails() 
  return (
  <Buttonn>Submit</Buttonn>
)

【参考方案1】：

styled.button 在 React (web) 中工作，如果你想在 React-native 中设置一个 Button 的样式，你必须使用 react-native 提供的 Button 组件。

您还必须从 'styled-components/native' 导入样式化组件

import styled from 'styled-components/native'

你可以像下面这样创建一个CustomButton组件

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

const CustomButton = props => (
    <ButtonContainer
        onPress=() => alert('Hi!')
        backgroundColor=props.backgroundColor
    >
        <ButtonText textColor=props.textColor>props.text</ButtonText>
</ButtonContainer>
);

export default CustomButton;

const ButtonContainer = styled.TouchableOpacity`
    width: 100px;
    height: 40px
    padding: 12px;
    border-radius: 10px;    
    background-color: $props => props.backgroundColor; 
`;

const ButtonText = styled.Text`
    font-size: 15px;
    color: $props => props.textColor;
    text-align: center;
`;

希望这个回答对你有帮助，谢谢！