React-Native中禁用Navigator手勢(shì)返回的示例代碼
在React-Native開(kāi)發(fā)中，經(jīng)常會(huì)用到導(dǎo)航。導(dǎo)航做什么用的呢，簡(jiǎn)單點(diǎn)說(shuō)就是頁(yè)面跳轉(zhuǎn)。
個(gè)項(xiàng)目中，肯定有很多的頁(yè)面要跳來(lái)跳去的，RN就給我們提供了Navigator組件，可以很好的管理頁(yè)面的跳轉(zhuǎn)。
在所有工作做完之后，發(fā)現(xiàn)有個(gè)bug！在從第一個(gè)界面跳轉(zhuǎn)到下一個(gè)界面后，如果從屏幕左邊向右滑，或者從上面想下滑，你會(huì)發(fā)現(xiàn)一個(gè)神奇的事情，那就是頁(yè)面會(huì)通過(guò)滑動(dòng)而返回到上一個(gè)界面。這讓我們很尷尬了，本來(lái)打算禁止跳轉(zhuǎn)返回的，或者返回時(shí)還要做些什么處理的，結(jié)果啥都沒(méi)做，直接返回，可以說(shuō)，這個(gè)功能有點(diǎn)適得其反了。
于是為了解決這個(gè)問(wèn)題，到處找答案，官網(wǎng)沒(méi)有說(shuō)，論壇也沒(méi)人回答。于是放置了很久很久，沒(méi)想到在今天的而然查找下，終于找到解決方案了。
方案主要分三種：
1，自己定義個(gè)configureScene：
const NoBackSwipe = {
...Navigator.SceneConfigs.HorizontalSwipeJump,
gestures: {
pop: {}
}
};
然后在Navigator標(biāo)簽下使用
<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，還有一種，是直接改源碼，在項(xiàng)目目錄下找到路徑：
/node_modules/react-native/Libraries/CustomComponents/Navigator/Navigator.js
里面有一段代碼，去掉pop就可以了
var GESTURE_ACTIONS = [ 'pop',//把這個(gè)去掉就可以了 'jumpBack', 'jumpForward', ];
這種直接修改源碼的不推薦使用，因?yàn)槊慨?dāng)你要升級(jí)RN或者做其他調(diào)整時(shí)，重新下載下來(lái)又得改，還是上面兩種比較靠譜。
以上就是今天的大發(fā)現(xiàn)，終于解決滑動(dòng)返回的問(wèn)題了~
資料參考：How to disable back swipe gesture in react native navigator
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 微信小程序間使用navigator跳轉(zhuǎn)傳值問(wèn)題實(shí)例分析
- DataGridView使用BindingNavigator實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能
- React Native中NavigatorIOS組件的簡(jiǎn)單使用詳解
- React Native中Navigator的使用方法示例
- react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
- react-native-tab-navigator組件的基本使用示例代碼
- ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
- JavaScript navigator.userAgent獲取瀏覽器信息案例講解
相關(guān)文章
useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能
這篇文章主要介紹了react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
webpack打包react項(xiàng)目的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack打包react項(xiàng)目的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
淺談React多個(gè)setState會(huì)調(diào)用幾次
在React的生命周期鉤子和合成事件中，多次執(zhí)行setState，會(huì)被調(diào)用幾次，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了React中的生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
用React實(shí)現(xiàn)一個(gè)類(lèi) chatGPT 的交互式問(wèn)答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實(shí)現(xiàn)一個(gè)類(lèi) chatGPT 的交互式問(wèn)答組件的方法，文中有詳細(xì)的代碼示例，對(duì)我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
通過(guò)示例講解Remix?設(shè)計(jì)哲學(xué)理念
這篇文章主要為大家通過(guò)示例講解了Remix?設(shè)計(jì)哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
詳解React中的setState執(zhí)行機(jī)制
setState是React組件中用于更新?tīng)顟B(tài)的方法,是類(lèi)組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細(xì)介紹了React中的setState執(zhí)行機(jī)制,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法
本文主要介紹了React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07