获取错误“函数组件不能有字符串引用,我们建议使用useRef()代替,”React Native Expo App虽然我正在使用useRef

nafvub8i  于 2023-01-31  发布在  React
关注(0)|答案(1)|浏览(142)
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.

bvjxkvbb

bvjxkvbb1#

试试这个:

const sheetRef = useRef<BottomSheet | null>(null);

或者

const sheetRef = useRef<BottomSheet>();

相关问题