类型 'never' 上不存在属性'togglePanel'

Question

我用的是" react-native-simple-bottom-sheet "。我正在使用togglePanelFunction关闭/打开面板中提到的文档，但我得到了这个奇怪的错误，属性'togglePanel'不存在类型'never'"我不确定那是什么意思。以下是代码供您参考。

const closeBottomSheet = () => {
if (bottomSheetRef.current) {
bottomSheetRef.current.togglePanel();
onClose(); // Call the onClose function when the bottom sheet is closed
}
};

完整代码:

import React, { useRef, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList, Dimensions } from 'react-native';
import BottomSheet from 'react-native-simple-bottom-sheet';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { LayoutAnimation } from 'react-native';
type SpaceBottomSheetProps = {
onClose: () => void;
}
const SpaceBottomSheet = ({ onClose }: SpaceBottomSheetProps) => {
const bottomSheetRef = useRef();
const [expandedItem, setExpandedItem] = useState(null);
const screenHeight = Dimensions.get('screen').height;
const bottomSheetHeight = screenHeight * 0.85;

const closeBottomSheet = () => {
if (bottomSheetRef.current) {
bottomSheetRef.current.togglePanel();
onClose(); // Call the onClose function when the bottom sheet is closed
}
};
const data = [
{ label: '2D Test' },
{ label: '2D Testing 2' },
{ label: '2D Testing 3' },
{ label: '2D Testing 1' },
{ label: '2D Testzaffar' },
{ label: '2D TestZaffar' },
];
const expandedData = [
{ label: 'Dashboard' },
{ label: 'List of Subspaces' },
{ label: 'View Space Details' },
{ label: 'Create Subspace' },
];
const renderItem = ({ item, index }) => {
const isExpanded = expandedItem === index;
const handlePress = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpandedItem(isExpanded ? null : index);
};
return (
<View style={styles.itemContainer}>
<TouchableOpacity onPress={handlePress}>
<View style={styles.labelContainer}>
<Text style={styles.label}>{item.label}</Text>
<MaterialIcons
name={isExpanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
size={24}
color="#555"
style={styles.arrowIcon}
/>
</View>
</TouchableOpacity>
{isExpanded && (
<FlatList
data={expandedData}
renderItem={({ item }) => (
<>
<TouchableOpacity style={styles.rowContainer}>
<View style={styles.row}>
<Text style={styles.rowLabel}>{item.label}</Text>
<MaterialIcons
name="keyboard-arrow-right"
size={18}
color="#555"
style={styles.rowArrowIcon}
/>
</View>
</TouchableOpacity>
{item.label === 'List of Subspaces' && <View style={styles.separator} />}
</>
)}
keyExtractor={(item) => item.label}
/>
)}
</View>
);
};
//console.log('bottomSheetHeight:', bottomSheetHeight);
return (
<View style={styles.container}>
<BottomSheet ref={bottomSheetRef} sliderMaxHeight={bottomSheetHeight} sliderMinHeight={0}>
<View style={styles.bottomSheet}>
<TouchableOpacity onPress={() => closeBottomSheet()} style={styles.closeIcon}>
<MaterialIcons name="close" size={24} color="#000000" />
</TouchableOpacity>
<View style={styles.header}>
<Text style={[styles.title, { fontFamily: 'Montserrat' }]}>Truminds</Text>
<Text style={[styles.create, { color: expandedItem !== null ? '#0F8D48' : '#4D4D4D' }]}>
+ Create Subspace
</Text>
</View>
<View style={styles.separator} />
<FlatList
style={styles.list}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.label}
/>
</View>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 0,
paddingTop: 28,
paddingBottom: 12,
},
itemContainer: {
backgroundColor: '#f2f2f2',
padding: 10,
borderRadius: 10,
marginBottom: 17,
},
title: {
fontSize: 24,
fontWeight: '800',
color: '#4D4D4D',
},
create: {
fontSize: 12,
fontWeight: '600',
},
bottomSheet: {
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingHorizontal: 5,
paddingBottom: 10,
marginTop: -20,
},
separator: {
height: 1,
backgroundColor: '#ddd',
marginVertical: 10,
},
list: {
marginTop: 10,
},
listItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 10,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingBottom: 3,
paddingTop: 3,
},
label: {
fontSize: 16,
fontWeight: '600',
color: '#4D4D4D',
},
arrowIcon: {
marginLeft: 10,
color: '#000000',
},
closeIcon: {
flex: 1,
alignItems: 'flex-end',
},
rowContainer: {
paddingHorizontal: 4,
paddingVertical: 10,
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
rowLabel: {
fontSize: 12,
fontWeight: '500',
color: '#4D4D4D',
},
rowArrowIcon: {
marginLeft: 10,
color: '#000000',
},
});
export default SpaceBottomSheet;

我认为这是因为我的声明和初始化的方式。

Answer 1

这是因为您没有传递类型给useRef，看起来react-native-simple-bottom-sheet没有@types条目，但否则您可以像这样传递类型:useRef<BottomSheetType | null>()。这样你就可以告诉Typescript，如果.current不是null，那么null(默认值)或BottomSheetType(一种我们目前无法从任何地方导入的类型，但你可以自己构造该类型)将作为bottomSheetRef.current的值。

现在你可以像这样输入:

const bottomSheetRef = useRef<{ togglePanel: () => void; } | null>();

，这应该会为您删除错误。请记住，如果外部库改变了行为，而您继续依赖自己的类型，那么您自己为外部库输入一些东西可能会在以后引起问题。当然，除了自己输入(或者贡献给DefinitelyTyped)之外，没有其他选择。我建议加一个注释，解释为什么它是这样输入的，这样在你理解了危险/发生了什么之后阅读代码的人。