import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";
export default function 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?.snapToIndex(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",
},
});
I am getting this error
错误:函数组件不能具有字符串引用。建议改用useRef()。在此处了解有关安全使用引用的详细信息:https://reactjs.org/link/strict-mode-string-ref
此错误位于:在RCTView(由View创建)中在View(由App创建)中在App(由withDevTools(App)创建)中在withDevTools(App)中在RCTView(由View创建)中在View(由AppContainer创建)中在RCTView(由View创建)中在View(由AppContainer创建)中在主(RootComponent)中的AppContainer中i want to know where i have mistaken or is there any other steps need to be followed.
1条答案
按热度按时间bvjxkvbb1#
试试这个:
或者