當使用StackNavigator帶fade過渡在螢屏之間導航時，用戶可以在過渡影片期間單擊，并可能TouchableOpacity在被導航離開的螢屏上點擊 。該TouchableOpacity登記命中，因此應用程式作出相應的回應。這給“快速點擊”用戶帶來了問題，他們點擊按鈕導航到新螢屏，然后立即點擊他們認為新按鈕所在的位置，但實際上是點擊前一個螢屏上的按鈕。
有沒有辦法在這些過渡影片期間阻止任何用戶互動？我嘗試將過渡持續時間設定為 0，如下所示：
transitionConfig: () => ({
transitionSpec: {
duration: 0
}
})
但問題仍然存在。
我不想完全禁用影片，因為它對于大多數用戶來說已經足夠快并且他們喜歡影片。
uj5u.com熱心網友回復：
所以在你的情況下你可以做幾件事
- 您可以使用 React Native Activity Indicator -> View
- 可以使用Overlay Library -> react-native-loading-spinner-overlay -> 查看GitHub
- 如果你喜歡像 facebook / instagram 那樣加載 -> 然后使用 react-native-easy-content-loader -> 查看 GitHub
uj5u.com熱心網友回復：
您需要在導航離開之前標記螢屏；禁用所有觸摸。
一個簡單的方法是有一個可重用的鉤子，它回傳一個透明的絕對定位視圖，覆寫整個頁面和一個回呼來啟用它；
所以你會流動；啟用這將覆寫整個螢屏并捕獲任何點擊，基本上禁用它們；
更像是：
function useOverlay(){
const [isVisible, toggle] = React.useState(false);
const Component = React.memo(()=><View style={styles.transparentAbsolute} />,[])
return [toggle, isVisible ? Component : null];
}
然后在你打電話之前在你的螢屏內navigate呼叫切換
并在螢屏頂??部包含組件；
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
const [ toggle, component ] = useOverlay();
return (
<View style={styles.container}>
{component}
<Button onPress={()=>{toggle(true); navigation.navigate('Home');} title="go home" />
</View>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/402921.html
標籤：
上一篇：變數值改變時的例外行為（簡單）