反应响应无效的挂钩调用

Question

我正在尝试在带有 styled-component 和 react-native-web 的 monorepos 中使用 react-responsive。
我有一个像我的 ui lib 这样的工作区，我这样定义我的组件：

import styled from 'styled-components/native';
import { theme } from '@components/theme';
import MediaQuery from 'react-responsive';

interface CardProps {
    children: React.ReactNode;
    tag: string;
}

const  Card = (props: CardProps) => {
    console.log("Card -> props", props)
    
    return (
        <Container>
            <MediaQuery minDeviceWidth={1000}>
                <Tag>'blablabla</Tag>
            </MediaQuery>
            <TagContainer>
                <Tag>{props.tag}</Tag>
            </TagContainer>
            <MainContent>{props.children}</MainContent>
        </Container>
    );
}

我这样定义风格：

const Container = styled.View`
    display: flex;
    flexDirection: column;
    minWidth: ${theme.width.minCard};
    maxWidth: ${theme.width.maxCard};
    height: ${theme.height.card};
    boxShadow: 0 0 10px ${theme.colors.primaryGrey};
    border: 1px solid ${theme.colors.primaryYellow};
    borderRadius: ${theme.borderRadius.rectangular};
    marginBottom: ${theme.margins.medium};
`;

const TagContainer = styled.View`
    display: flex;
    flexDirection: row-reverse;
`;

我正在尝试在位于另一个工作区的 react-native 应用程序中使用此组件，如下所示：

return (
            <View>
                <Specialist
                    key={psychologist.uuid}
                    img={psychologist.avatar.url}
                    name={psychologist.fullname}
                    job={psychologist.job_name}
                    description={psychologist.description}
                />
            </View>
        );

每次，我都发现自己被这个错误阻止：

但是我的组件确实是一个功能组件...
有什么想法吗？

Answer 1

您使用的the package 仅用于react.js。

对于 React Native，你可以使用

React Native Responsive Screen

react-native-responsive-screen 中给出的示例

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
 
class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
          <Text style={styles.myText}>Login</Text>
        </View>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  textWrapper: {
    height: hp('70%'), // 70% of height device screen
    width: wp('80%')   // 80% of width device screen
  },
  myText: {
    fontSize: hp('5%') // End result looks like the provided UI mockup
  }
});
 
export default Login;