не допустить, чтобы backhandler свернул приложение

Question

как я могу предотвратить сворачивание / закрытие приложения при нажатии кнопки «Назад» на моем устройстве?

Я пытаюсь назначить функцию «браузеры назад» при нажатии кнопки «Назад» на моем устройстве, вот мой код:

import 'react-native-get-random-values';
import React, { useState, useRef, Component, useEffect  } from 'react'
import {
  Alert,
  SafeAreaView,
  StyleSheet,
  StatusBar,
  View,
  Text,
  ScrollView,
  BackHandler,
  RefreshControl
} from 'react-native'
import WebView from 'react-native-webview'
import Icon from 'react-native-vector-icons/FontAwesome';
import { Button } from 'react-native-elements';



const App = () => {
  function backButtonHandler(){}
  function refreshHandler(){
    if (webviewRef.current) webviewRef.current.reload()
  }

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", backButtonHandler);
    return () => {
      BackHandler.removeEventListener("hardwareBackPress", backButtonHandler);
    };
  }, [backButtonHandler]);


  let jscode = `window.onscroll=function(){window.ReactNativeWebView.postMessage(document.documentElement.scrollTop||document.body.scrollTop)}`;
  const [canGoBack, setCanGoBack] = useState(false)
  const [currentUrl, setCurrentUrl] = useState('')
  const [refreshing, setRefreshing] = useState(false);
  const [scrollviewState, setEnableRefresh] = useState(false);
  const webviewRef = useRef(null)
  const scrollviewRef = useRef(false)

  backButtonHandler = () => {
    if (webviewRef.current) webviewRef.current.goBack()
  }

  return (
    <>
      <StatusBar barStyle='dark-content' />
      <SafeAreaView style={styles.flexContainer}>
      <ScrollView
           contentContainerStyle={styles.flexContainer}
           refreshControl={
             <RefreshControl refreshing={false} onRefresh={refreshHandler} ref={scrollviewRef} enabled={ (scrollviewState) ? true : false  } />
           }>
        <WebView
          source={{ uri: 'https://youtube.com' }}
          startInLoadingState={true}
          ref={webviewRef}
          onNavigationStateChange={navState => {
            setCanGoBack(navState.canGoBack)
            setCurrentUrl(navState.url)
          }}

          injectedJavaScript={jscode}
          onMessage={(event)=>{
                        let message  = event.nativeEvent.data;
                        let num = parseInt(message);
                        if(num==0){setEnableRefresh(true)}
                        else{setEnableRefresh(false)}
                    }}
        />
        </ScrollView>


        <View style={styles.tabBarContainer}>
        <Button onPress={backButtonHandler}
          icon={
            <Icon
              name="arrow-left"
              size={15}
              color="white"
            />
          }
          containerStyle={styles.buttonx}
          title="Back"
        />
        </View>
      </SafeAreaView>
    </>
  )
}






const styles = StyleSheet.create({
  flexContainer: {
    flex: 1
  },
  tabBarContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'orange'
  },
  buttonx: {
    backgroundColor:'blue',
    width:'100%'
  }
})

export default App

моя проблема в том, что когда я нажимаю кнопку «Назад» на моем устройстве, она вызывает функцию backButtonHandler, и мой веб-просмотр перемещается назад, но в то же время приложение также минимизируется ... есть ли способ предотвратить это?

Answer 1

измените ваш метод backButtonHandler, чтобы он просто возвращал true, когда ваш метод backHandler действительно возвращает true, он фактически ничего не делает при нажатии кнопки Back:

 
 backButtonHandler = () => {
    return true;
  }