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