Question

TypeError：未定义不是一个函数（靠近'..._styledComponents.default.button...'）

2021-09-17

3914

react-native styled-components

我在 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>
)}

Answer 1

styled.button 在 React (web) 中有效，如果您想在 React-native 中设置按钮样式，则必须使用 react-native 提供的按钮组件。

您还必须从“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;
`;

希望这个答案对您有所帮助，谢谢！