我在 TypeScript SafeAreaView組件中遇到了一個奇怪的錯誤。我為 WebView 創建了其他參考并且它沒有失敗，只是在分配給 SafeAreaView 組件時似乎失敗了。
import { useRef, MutableRefObject } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
...
...
const topSafeAreaViewRef = useRef(null);
...
...
<SafeAreaView ref={topSafeAreaViewRef} style={styles.container} edges={['top', 'right', 'left']} >
TS2322：型別'{孩子：元素；參考：可變參考物件；風格：{彈性：數字；背景顏色：任意；}; 邊緣：（“頂部”|“右”|“左”）[]；}' 不可分配給型別 'IntrinsicAttributes & ViewProps & { children?: ReactNode; 模式？：“填充”| “邊距” | 不明確的; 邊緣？：只讀邊緣 [] | 不明確的; }'。型別'IntrinsicAttributes & ViewProps & { children?: ReactNode; 上不存在屬性'ref' 模式？：“填充”| “邊距” | 不明確的; 邊緣？：只讀邊緣 [] | 不明確的; }'。
我需要 ref 因為我需要在外部函式上設定setNativeProps
const handleOnLoadEnd = (
syntheticEvent: WebViewNavigationEvent | WebViewErrorEvent,
topSafeAreaViewRef: MutableRefObject<any>,
) => {
topSafeAreaViewRef.current.setNativeProps({
style:{
backgroundColor: Constants?.manifest?.extra?.webViewBackground,
}
});
};
uj5u.com熱心網友回復：
的組件不支持react-native-safe-area-context道具。SafeAreaViewref
如果您需要ref計算寬度、高度等，您可以嘗試這樣的解決方法（未經測驗）：
import { useRef } from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function App() {
const ref = useRef();
const insets = useSafeAreaInsets();
return (
<View
ref={ref}
style={{
paddingTop: insets.top,
paddingLeft: insets.left,
paddingBottom: insets.bottom,
paddingRight: insets.right,
}}
/>
);
}
uj5u.com熱心網友回復：
SafeAreaView是使用插圖的首選方式。這是一個常規View，插入作為額外的填充或邊距。它通過原生應用插圖來提供更好的性能，并避免其他基于 JS 的消費者可能發生的閃爍。
SafeAreaView是一個常規的 View 組件，其安全區域插圖應用為填充或邊距。
內邊距或邊距樣式被添加到插圖中，例如style={{paddingTop: 10}}在具有 20 插圖的SafeAreaView上將導致頂部內邊距為 30。
例子：
import { SafeAreaView } from 'react-native-safe-area-context';
function SomeComponent() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
<View style={{ flex: 1, backgroundColor: 'blue' }} />
</SafeAreaView>
);
}
邊緣：
可選，頂部、右側、底部和左側的陣列。默認為所有。
設定要應用安全區域插圖的邊緣。
例如，如果您不希望插入應用到頂部邊緣，因為視圖不接觸螢屏頂部，您可以使用：
<SafeAreaView edges={['right', 'bottom', 'left']} />
有關更多詳細資訊或檔案，您可以在此處查看
您應該洗掉，useRef()因為 useRef 在 SafeAreaView 中沒有運動。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421072.html
標籤：
上一篇：在Python中，當元素串列的長度發生變化時，如何遍歷給定Xpath組的所有可點擊元素
下一篇：從子組件觸發父組件的方法-反應