How to go back scene with cell button

Question

How to go back scene with cell button

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

The only way my app has to go back from the scene is by the button I created, when I click the back button on my phone the application closes.

Button code I created:

<TouchableHighlight
    underlayColor={'#66CDAA'}
    onPress={() => {
    this.props.navigator.pop();
    }}>
        <Image  source={require('../imgs/Voltar.png')}
</TouchableHighlight>

To navigate between scenes I used import {Navigator} from 'react-native-deprecated-custom-components'; and after importing the scenes I will navigate I used this code:

 <Navigator
          initialRoute={{id: 'CenaInicial'}}
          renderScene={(route, navigator) => {
            if(route.id === 'CenaInicial')
            {
              return(<CenaInicial navigator={navigator} />);
            }

So I declared all the scenes and in each of them I put the command this.props.navigator.push({ id: 'NomeDaCena' }); to change the scene. The problem is that only this command is not enough to return the scene with the button of the cell.

What do I have to do for the back button on the phone to make it show the previous scene instead of closing the application?

react-native

asked by anonymous 07.06.2017 / 21:44

2 answers

0

Hello!

Have you solved this problem yet? If you are using react-navigation

You can add the following excerpt to the constructor of your navigation component:

    import { Platform, BackHandler } from 'react-native';


export class AppWithNavigationState extends Component {

      constructor(props) {
         super(props);
      }

      shouldCloseApp(nav) {
         return nav.index == 0;
      }

      // Esta função valida o SO do usuário, caso o desenvolvimento seja para ambas as plataformas.

      isAndroidApp() {
        return Platform.OS == 'android';
      }
      componentDidMount() {
        // backPress é o evento de Back() executado pelo Hardware.
        BackHandler.addEventListener('backPress', () => {
          if (this.shouldCloseApp(this.props.nav) || !this.isAndroidApp()) return false

          // Caso esteja usando o react-navigation ele vai disparar um evento de navegação (ele integra com o redux)
          this.props.dispatch({
            type: 'Navigation/BACK'
          })

          // ou logo abaixo algum código pra remover sua cena da pilha.
          ... 
              return true
            })
          }

It should be remembered that this solution only applies to Android.

I hope to help.

11.07.2017 / 18:48

How to retrieve GET variables after it has been modified by .htaccess RewriteRule? List Linked Java net beans

score 0 · Accepted Answer

I may be wrong but I believe Navigator already does this automatically. Clicking the back button on the phone shows the previous scene navigator.pop()

What may be happening is that your navigation stack is empty. So, the application will actually close.

Perhaps the problem lies in the method you are using to advance a scene.

I use the following form:

import { createRouter } from '@exponent/ex-navigation';

import Cena from './screens/Cena';

const Router = createRouter(() => ({
    NomeDaCena: () => Cena})
)

navigator.push(Router.getRoute("NomeDaCena",{prop: 'Valor'}))

If you continue to check that the error is not at the scene preview, you can try to add Listeners to the android physical button:

link

To do this, simply do the following in the screens where you want to go back:

  import { BackHandler } from 'react-native';

      {...}

      componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress',() => {
         this.props.navigator.pop();
        });
      }

Edit: If you use BackHandler do not forget to remove the Listener when the component is unmounted to avoid multiple calls of navigator.pop() :

 componentWillUnmount() {
   BackHandler.removeEventListener('hardwareBackPress',() => {
     this.props.navigator.pop();
   });
 }