【问题标题】: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>
)}

【问题讨论】:

    标签: react-native styled-components


    【解决方案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;
    `;
    

    希望这个回答对你有帮助,谢谢!

    【讨论】:

      猜你喜欢
      • 2015-09-18
      • 2013-12-22
      • 2015-01-19
      • 2014-06-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多