最近寫了個新rn項目，項目要求是rn內(nèi)嵌一個webview網(wǎng)頁實現(xiàn)全部業(yè)務需求~~鑒于網(wǎng)頁頁面數(shù)量較多，這就涉及到頁面的跳轉(zhuǎn)、返回上頁以及退出APP的問題，由于不做處理的話點擊手機的返回按鈕會直接退出APP，故在網(wǎng)上搜索了相應的解決方案，為防止誤導大家，就不貼圖了，總之，無非都是抄來抄去還是錯的，按照其寫法，多近幾個頁面，返回到網(wǎng)頁首頁以后就得多點n次才能退出APP，差評，經(jīng)過一番操作調(diào)試，貼上本人代碼
export?default?class?App?extends?Component<Props>?{
??constructor(props){
????super(props);
????this.state?=?{
??????backButtonEnabled:false,
??????clicked:false,
????};
}
??onNavigationStateChange?=?navState?=>?{
????this.state.backButtonEnabled=?navState.canGoBack
??};
??render()?{
????return?(
??????<>
??????<StatusBar?backgroundColor="#EB0000"?barStyle="light-content"?translucent={true}?/>
??????<WebView
????????source={{?uri:?********'?}}
????????style={styles.container}
????????ref="webView"
????????onNavigationStateChange={this.onNavigationStateChange}
????????/>
??????</>
????);
??}
??//?監(jiān)聽原生返回鍵事件
??componentDidMount()?{
????setTimeout(()=>{
??????SplashScreen.hide()
????}?,2000);
?this.setState({
??clicked:false
?})
????if?(Platform.OS?===?'android')?{
??????BackHandler.addEventListener('hardwareBackPress',?this.onBackAndroid);
????}
??}
??onBackAndroid?=?()?=>?{
????console.log(this.state.backButtonEnabled)
????if?(this.state.backButtonEnabled)?{
??????this.refs['webView'].goBack();
??????return?true;
????}?else?{
??????if?(this.state.clicked)?{
????????//點過一次了。
????????console.log('back')
????????return?false;
??????}
??????this.state.clicked=true
??????ToastAndroid.show('再按一次退出應用',?ToastAndroid.SHORT);
??????return?true;
????}
??};
}
親測可用
