Ich habe die Android-Zurück-Schaltfläche zum Beenden der App-Funktionalität in meiner reaktiven App auf meinem Startbildschirm gesetzt. Wenn ich aber auf anderen Bildschirmen die Android-Zurück-Taste drücke, wird es auch gerufen.
componentDidMount() {
if (Platform.OS == "Android") {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
this._setupGoogleSignin();
this._getUserDetails();
const { navigate } = this.props.navigation;
console.log("object url is", this.state.postsArray[0].url);
}
handleBackButton = () => {
Alert.alert(
'Exit App',
'Exiting the application?', [{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () => BackHandler.exitApp()
}, ], {
cancelable: false
}
)
return true;
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
Wenn Ihr HomeScreen immer noch eingehängt ist, wenn Sie zu anderen Bildschirmen navigieren oder die HomeScreen
abnehmen, wenn Sie den EventListener nicht entfernen, wird er weiterhin aufgerufen.
Sie sollten den EventListener beim Navigieren oder Aufheben der Bereitstellung deaktivieren.
onButtonPress = () => {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
// then navigate
navigate('NewScreen');
}
handleBackButton = () => {
Alert.alert(
'Exit App',
'Exiting the application?', [{
text: 'Cancel',
onPress: () = > console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () = > BackHandler.exitApp()
}, ], {
cancelable: false
}
)
return true;
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
Guyz, bitte verstehen Sie, es kann nicht nur das Problem sein, mit dem native reagieren. Seien Sie vorsichtig, wenn Sie es mit Firebase integrieren. Die neueste Firebase-Version hat das Problem, dass die Schaltfläche "Zurück" in reaktiöse Apps integriert werden kann !! Downgrade der Firebase-Version auf Firebase-Version @ 5.0.3 und dann erneut prüfen, ob sie funktioniert oder nicht! Ich hatte das gleiche Problem und war tagelang besorgt. Ich habe endlich auf die Version 5.0.3 heruntergestuft und jetzt funktioniert der Zurück-Button einwandfrei! Sie können ein Downgrade auf niedrigere Versionen durchführen, wenn das Problem weiterhin besteht.
Wir könnensubscriptionsfordidfocusin unserem Haupt-App-Container hinzufügen. Wir können unsere Logik hinzufügen, um zu prüfen, ob mit einerstatic-Variablegetippt wird .
import { Alert, BackHandler, ToastAndroid } from 'react-native';
import { StackActions } from 'react-navigation';
// common statless class variable.
let backHandlerClickCount = 0;
class App extends React.Component {
constructor(props) {
super(props);
// add listener to didFocus
this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
BackHandler.addEventListener('hardwareBackPress', () => this.onBackButtonPressAndroid(payload)));
}
// remove listener on unmount
componentWillUnmount() {
if (this._didFocusSubscription) {
this._didFocusSubscription.remove();
}
}
onBackButtonPressAndroid = () => {
const shortToast = message => {
ToastAndroid.showWithGravityAndOffset(
message,
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
25,
50
);
const {
clickedPosition
} = this.state;
backHandlerClickCount += 1;
if ((clickedPosition !== 1)) {
if ((backHandlerClickCount < 2)) {
shortToast('Press again to quit the application!');
} else {
BackHandler.exitApp();
}
}
// timeout for fade and exit
setTimeout(() => {
backHandlerClickCount = 0;
}, 2000);
if (((clickedPosition === 1) &&
(this.props.navigation.isFocused()))) {
Alert.alert(
'Exit Application',
'Do you want to quit application?', [{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () => BackHandler.exitApp()
}], {
cancelable: false
}
);
} else {
this.props.navigation.dispatch(StackActions.pop({
n: 1
}));
}
return true;
}
}
BackHandler.addEventListener('hardwareBackPress', function() {
Alert.alert(
'Thoát Khỏi Ứng Dụng',
'Bạn có muốn thoát không?', [{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () => BackHandler.exitApp()
}, ], {
cancelable: false
}
)
return true;
})
Wenn Sie nicht möchten, dass die Warnmeldung in einer anderen Komponente/einem anderen Bildschirm angezeigt wird, sondern nur in einer bestimmten Komponente/einem bestimmten Bildschirm, können Sie dem folgen.
import { withNavigationFocus } from 'react-navigation';
class TestComponent extends Component {
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = () => {
if (this.props.isFocused) {
Alert.alert(
'Exit App',
'Exiting the application?',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'OK',
onPress: () => BackHandler.exitApp()
}
],
{
cancelable: false
}
);
return true;
}
};
}
export default withNavigationFocus(TestComponent );
Der BackHandler, der eine Warnmeldung anzeigt, funktioniert nur in TestComponent
Sie können jederzeit dynamisch ändern, was die Rückruffunktion für das BackHandler.addEventListener
basiert auf der aktuellen Szene (mit react-native-router-flux
macht das einfach).
import { Actions } from 'react-native-router-flux'
handleBackPress = () => {
switch (Actions.currentScene) {
case 'home':
BackHandler.exitApp()
break
default: Actions.pop()
}
return true
}
Den vollständigen Inhalt finden Sie hier: https://Gist.github.com/omeileo/f05a068557e9f0a2d8a24ecccd2f3177