J'ai mis le bouton de retour Android quitter la fonctionnalité de l'application dans mon application native de réaction sur mon écran d'accueil. Mais lorsque j'appuie sur le bouton de retour Android sur d'autres écrans, il se fait appeler.
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);
}
Si votre écran d'accueil est toujours monté lorsque vous accédez à d'autres écrans ou lors du démontage de HomeScreen
, si vous ne supprimez pas EventListener, il sera toujours appelé.
Vous devez effacer EventListener lors de la navigation ou du démontage,
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, s'il vous plaît, comprenez que ce n'est peut-être pas seulement le problème avec Native. Faites attention en l'intégrant à firebase. La version récente de Firebase pose le problème de l’intégration du bouton de retour dans les applications réactives! Veuillez déclasser la version de Firebase à Firebase-version @ 5.0.3, puis vérifier à nouveau si cela fonctionne ou non! J'ai eu le même problème et j'étais inquiet pendant des jours. J'ai finalement rétrogradé à la version @ 5.0.3 et maintenant le bouton de retour fonctionne parfaitement! Vous pouvez revenir à des versions inférieures si le problème persiste.
Nous pouvons ajouterabonnementspourdidfocusdans notre conteneur d'applications principal. Nous pouvons ajouter notre logique pour vérifier si un bouton est utilisé avec une variablestatique.
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;
})
Si vous ne souhaitez pas que le message d'alerte apparaisse dans un autre composant/écran, mais uniquement dans un composant/écran spécifique, vous pouvez le suivre.
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 );
Le BackHandler qui affichera un message d'alerte ne fonctionnera que dans TestComponent