最近写了个新rn项目，项目要求是rn内嵌一个webview网页实现全部业务需求~~鉴于网页页面数量较多，这就涉及到页面的跳转、返回上页以及退出APP的问题，由于不做处理的话点击手机的返回按钮会直接退出APP，故在网上搜索了相应的解决方案，为防止误导大家，就不贴图了，总之，无非都是抄来抄去还是错的，按照其写法，多近几个页面，返回到网页首页以后就得多点n次才能退出APP，差评，经过一番操作调试，贴上本人代码
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}
/>
</>
);
}
// 监听原生返回键事件
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;
}
};
}
亲测可用
网友评论