javascript - 底页模态无法在 Expo 中运行
问题描述
我正在尝试将此库与以下代码一起使用:
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";
const App = () => {
// hooks
const sheetRef = useRef < BottomSheet > null;
// variables
const data = useMemo(
() =>
Array(50)
.fill(0)
.map((_, index) => `index-${index}`),
[]
);
const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);
// callbacks
const handleSheetChange = useCallback((index) => {
console.log("handleSheetChange", index);
}, []);
const handleSnapPress = useCallback((index) => {
sheetRef.current?.snapTo(index);
}, []);
const handleClosePress = useCallback(() => {
sheetRef.current?.close();
}, []);
// render
const renderItem = useCallback(
({ item }) => (
<View style={styles.itemContainer}>
<Text>{item}</Text>
</View>
),
[]
);
return (
<View style={styles.container}>
<Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
<Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
<Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
<Button title="Close" onPress={() => handleClosePress()} />
<BottomSheet
ref={sheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
>
<BottomSheetFlatList
data={data}
keyExtractor={(i) => i}
renderItem={renderItem}
contentContainerStyle={styles.contentContainer}
/>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 200,
},
contentContainer: {
backgroundColor: "white",
},
itemContainer: {
padding: 6,
margin: 6,
backgroundColor: "#eee",
},
});
export default App;
但我有一个错误:
错误:函数组件不能有字符串引用。我们建议改用 useRef()。在此处了解有关安全使用 refs 的更多信息:
我在博览会上运行它,但这个库支持它。所以我不知道问题出在哪里以及如何解决?也许这
常量 sheetRef = useRef < BottomSheet > null;
导致问题?
对不起,我的英语不好!
解决方案
推荐阅读
- python - TensorFlow / Keras Python CNN
- r - 将一个组与 R 中的其他组作为一个整体进行比较
- c - 如何使用 C (Linux) 向所有终端发送消息?
- r - 如何通过 3 个变量值类型添加新变量?
- javascript - 无法通过 Node 连接到 MSSQL 服务器,而 Intellij 连接有效(MacOS)
- android - AndroidStudio 编译原生代码显示“fcntl(): Bad file descriptor”
- elixir - 按二维分组并在 Elixir 中计数
- typescript - 无法读取数据表中未定义的属性
- kubernetes - Kubernetes 延迟 pod 终止 - FailedPreStopHook
- python - 创建模型时可以使用函数设置字段吗(django)