React-Native中禁用Navigator手勢返回的示例代碼
在React-Native開發(fā)中，經(jīng)常會用到導航。導航做什么用的呢，簡單點說就是頁面跳轉(zhuǎn)。
個項目中，肯定有很多的頁面要跳來跳去的，RN就給我們提供了Navigator組件，可以很好的管理頁面的跳轉(zhuǎn)。
在所有工作做完之后，發(fā)現(xiàn)有個bug！在從第一個界面跳轉(zhuǎn)到下一個界面后，如果從屏幕左邊向右滑，或者從上面想下滑，你會發(fā)現(xiàn)一個神奇的事情，那就是頁面會通過滑動而返回到上一個界面。這讓我們很尷尬了，本來打算禁止跳轉(zhuǎn)返回的，或者返回時還要做些什么處理的，結(jié)果啥都沒做，直接返回，可以說，這個功能有點適得其反了。
于是為了解決這個問題，到處找答案，官網(wǎng)沒有說，論壇也沒人回答。于是放置了很久很久，沒想到在今天的而然查找下，終于找到解決方案了。
方案主要分三種：
1，自己定義個configureScene：
const NoBackSwipe = {
...Navigator.SceneConfigs.HorizontalSwipeJump,
gestures: {
pop: {}
}
};
然后在Navigator標簽下使用
<Navigator
initialRoute={{Component:'xxx', name:'xxx', index:0, configure: NoBackSwipe}}
renderScene={this.renderScene.bind(this)}
configureScene={(route,routeStack)=>{
return NoBackSwipe
}}
/>
這里主要是處理了pop，其中還有jumpback，jumpforward的
2，如果你都不要返回處理的，直接將gestures都改成{}或者null
configureScene(route, routeStack){
let configure = Navigator.SceneConfigs.PushFromRight;
switch(route.configure){
case Consts.FloatFromLeft:
configure = Navigator.SceneConfigs.FloatFromLeft;
break;
case Consts.FloatFromBottom:
configure = Navigator.SceneConfigs.FloatFromBottom;
break;
}
return {
...configure,
gestures:{}//或者改成null
};
}
然后使用也是一樣：
<Navigator initialRoute={{Component:'xxx', name:'xxx', index:0, configure: NoBackSwipe}}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
onStartShouldSetResponder={()=>false}/>
我就是用的第二種。
3，還有一種，是直接改源碼，在項目目錄下找到路徑：
/node_modules/react-native/Libraries/CustomComponents/Navigator/Navigator.js
里面有一段代碼，去掉pop就可以了
var GESTURE_ACTIONS = [ 'pop',//把這個去掉就可以了 'jumpBack', 'jumpForward', ];
這種直接修改源碼的不推薦使用，因為每當你要升級RN或者做其他調(diào)整時，重新下載下來又得改，還是上面兩種比較靠譜。
以上就是今天的大發(fā)現(xiàn)，終于解決滑動返回的問題了~
資料參考：How to disable back swipe gesture in react native navigator
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- 微信小程序間使用navigator跳轉(zhuǎn)傳值問題實例分析
- DataGridView使用BindingNavigator實現(xiàn)簡單分頁功能
- React Native中NavigatorIOS組件的簡單使用詳解
- React Native中Navigator的使用方法示例
- react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
- react-native-tab-navigator組件的基本使用示例代碼
- ReactNative頁面跳轉(zhuǎn)Navigator實現(xiàn)的示例代碼
- JavaScript navigator.userAgent獲取瀏覽器信息案例講解
相關(guān)文章
react-native-video實現(xiàn)視頻全屏播放的方法
這篇文章主要介紹了react-native-video實現(xiàn)視頻全屏播放的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
如何使用 electron-forge 搭建 React + Ts&n
本文介紹了如何使用Electron、electron-forge、webpack、TypeScript、React和SCSS等技術(shù)搭建一個桌面應(yīng)用程序,通過這篇文章,開發(fā)者可以創(chuàng)建一個包含React組件、SCSS樣式、靜態(tài)資源和Loading頁面的應(yīng)用,感興趣的朋友一起看看吧2025-01-01
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-07-07
在react類組件（class）寫法中，有setState和生命周期對狀態(tài)進行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2023-03-03
React Ant Design樹形表格的復(fù)雜增刪改操作
這篇文章主要介紹了React Ant Design樹形表格的復(fù)雜增刪改操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了react-router6.x路由配置及導航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React中使用react-file-viewer問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了React列表欄及購物車組件使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
React中useCallback useMemo到底該怎么用
在React函數(shù)組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2023-02-02