React Native (12)--return processing in nested WebView

Scenario Description:

From a component called "My" to enter a list (the contents of this list is webview content), one of the webview can also click into the Details page (also for WebView), but if you do not do any work on the navigation bar, directly click the Back button, Will go directly from the details page to the topmost page, and not return to the list content page; Obviously this is not the effect we want, so we need to add the WebView return event processing in the original navigation return event, the complete code is as follows (due to the video format has a problem, can not see the Sancent, Just look at the code):

Export Class Commonproblem extends Component {//Customizing a componentStatic Navigationoptions = ({navigation}) = = {        return{headertitle:' FAQs ',//Navigation titleHeadertitlestyle: {alignself:' Center ', TextAlign:' Center ', FontSize:16, Color:' #FFF '}, HeaderLeft: (<touchablehighlight activeopacity={1} underlaycolor={Skin.main} onpress={() ={navigation.state.params.goBackPage (); }}                > <view style={{paddingleft:20}}> <icon name= "Ios-arrow-round-bac K-outline "size={30} style={{Color: ' #FFF '}}/> </View> </touchablehighlig Ht>            ),                                                //navigate left and navigate to the right to center the navigation header (why?)HeaderRight: <view style={{paddingright:20}}/>        };    };        Constructor (props) {super (props);  This. Nav = This. props.navigation;//Navigation        //Add back key listener (handling of Android native return key)         This. Addbackandroidlistener ( This. Nav); } componentdidmount () { This. Props.navigation.setParams ({//adding listener events to the navigationGobackpage: This. _gobackpage}); }                //Custom Return Events_gobackpage = () = {                                //Official website Description: Backbuttonenabled:false, indicating that there is no return event in WebView, True indicates that the WebView has a fallback event        if( This. state.backbuttonenabled) {             This. refs[' WebView '].goback (); } Else{//Otherwise, return to the previous page             This. Nav.goback ();    }    }; //Get linksGetSource () {//CONFIG. Helpproblemurltest is the address of WebView (a separate H5 page)        if(!CONFIG. Release) {returnCONFIG.        Helpproblemurltest; }        returnCONFIG.    Helpproblemurl; } Onnavigationstatechange= Navstate + = {         This. SetState ({backButtonEnabled:navState.canGoBack});    }; //listen for native return key eventsAddbackandroidlistener (navigator) {if(Platform.os = = = ' Android ') {Backhandler.addeventlistener (' Hardwarebackpress ', This. onbackandroid); }} onbackandroid= () + = {        if( This. state.backbuttonenabled) {             This. refs[' WebView '].goback (); return true; } Else {            return false;    }    }; Render () {Let Dimensions= Require (' Dimensions '); Let {width, height}= Dimensions.get (' window '); return (            <view style={{backgroundColor:skin.lightSeparate, flex:1}}> <WebView Source={{URI: This. GetSource ()}} Style={{flex:10, justifycontent: ' Center ', Alignitems: ' Center ', Width:width}} Ref= "WebView"Onnavigationstatechange={ This. Onnavigationstatechange}/> </View>        ); }}

This is the perfect way to achieve the problem you want.

React Native (12)--return processing in nested WebView