reactjs 组件“path”的视图配置getter回调必须是一个函数(接收时“undefined”),请确保组件名称以大写字母开头

2ul0zpep  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(124)

我在尝试使用react native的自定义选择组件时遇到以下错误。此组件在web版本上可以工作,但在react native上会中断。我如何解决此问题?
不变违背:组件path的视图配置getter回调必须是一个函数(已接收undefined)。请确保组件名称以大写字母开头。

import { TouchableOpacity } from "react-native";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { RiArrowDropDownLine, RiArrowDropUpLine, RiCloseLine } from "react-icons/ri"

const Select = React.forwardRef((props, ref) => {
    const {
        data,
        boxStyles,
        placeholder,
        setSelected,
    } = props;
    const [current, setCurrent] = useState(null);
    const [isClosed, setisClosed] = useState(true);

    useEffect(() => {
        setSelected(current)
    }, [current])

    const handleReset = () => {
        setCurrent(null)
        setSelected(null)
    }
    const handleOpen = () => setisClosed(flag => !flag);
    const handleSelect = (name) => {
        setCurrent(name)
        handleOpen()
    };

    const options = data?.map((item, index) => {
        return <TouchableOpacity
            style={styles.option}
            onPress={() => handleSelect(item.value)}
            key={index}>
            <Text>{item.label}</Text>
        </TouchableOpacity>
    });

    return <View style={boxStyles} >
        <TouchableOpacity style={styles.wrapper} onPress={handleOpen}>
            <Text>{current || placeholder}</Text>
            {current ?
                <TouchableOpacity onPress={() => handleReset()} ref={ref}>
                    <RiCloseLine />
                </TouchableOpacity>
            :
                isClosed ? <RiArrowDropDownLine/> : <RiArrowDropUpLine />
            }
        </TouchableOpacity>
        <View style={[styles.dropdown, isClosed && styles.isClosed]} >{options}</View>
    </View>
})

const styles = StyleSheet.create({
    isClosed: {height: 0, display: "none"},
    wrapper:{ borderWidth:1,borderRadius:10,borderColor:'gray',paddingHorizontal:20,paddingVertical:12,flexDirection:'row',justifyContent:'space-between',fontSize: 22},
    dropdown:{ borderWidth:1,borderRadius:10,borderColor:'gray',marginTop:10,overflow:'hidden'},
    option:{ paddingHorizontal:20,paddingVertical:8,overflow:'hidden'},
    disabledoption:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center', backgroundColor:'whitesmoke',opacity:0.9}
})

export default Select
xesrikrc

xesrikrc1#

问题似乎与react-icons库有关。
我找到了这个GitHub issue,它说:
[The react-icons]库与React Native不兼容,因为它使用<svg>标记。如果使用Expo,请使用react-native-vector-icons@expo/vector-icons
@chackerian说(在评论中),他们尝试了一个React原生图标包,但仍然不起作用。

相关问题