ThunderWiring ThunderWiring - 3 years ago 158
Android Question

how to use StackNavigation's navigate method in

I am creating an Android app, where the UI is done in react native.

The UI has 4 files:


  1. index.android.js
    : automatically created with
    react-native init <app_name>

  2. Piper.js
    : main entry to the app.

  3. Screen1.js
    : screen #1 in the app.

  4. Screen2.js
    : screen #2 in the app.



I'm using an Android-Nugat device (not emulator). Also running the project via the command line by
react-native run-android


When clicking the button on
Screen1
(code bellow), I get the red screen:

enter image description here

Question


  • Why the method
    navigate
    (in
    const {navigate} = this.props.navigation;
    , see Screen1.js
    render()
    function) is undefined?

  • How it should be used?

  • What in the code that makes
    StackNavigator
    not to work?



Here are the contents of the files:

index.android.js
:


import { AppRegistry } from 'react-native';
const Piper = require('./js/Piper');
AppRegistry.registerComponent('Piper', () => Piper);


Piper.js

/**
* @flow
*/
import { StackNavigator } from 'react-navigation';
const React = require('React');
const Screen1 = require('./intro/Screen1');
const Screen2 = require('./intro/Screen2');

const piperRoute = StackNavigator({
Screen1: { screen: Screen1},
Screen2: { screen: Screen2},
});

class Piper extends React.Component {
constructor() {
super();
}
render(): React.Node {
return (
<Screen1 navigation={piperRoute}/>
);
}
}
module.exports = Piper;


Screen1.js

/**
*
* @providesModule Screen1
* @flow
*/
"use strict";

import StackNavigator from 'react-navigation';
/* other imports used in render() */

class Screen1 extends React.Component<{navigation: StackNavigator}> {
static navigationOptions = { title: "Welcome" }

constructor() {
super();
}

render(): React.Node {
const {navigate} = this.props.navigation;
return (
<View>
<Button
title='ok'
onPress={() => navigate('RequestPermission', {navigation: this.props.navigation})}
/>
</View>
);
}
}

const styles = StyleSheet.create({ /* ... styles ...*/});

module.exports = Screen1;


Screen2.js

/**
*
* @providesModule Screen2
* @flow
*/
'use strict';
import StackNavigator from 'react-navigation';

/* other imports */

class Screen2 extends React.Component<{navigation: StackNavigator}> {
render(): React.Node {
return (
<View>
<Image ... />
</View>
);
}
}
const styles = StyleSheet.create({ /* ... */ });
module.exports = Screen2;

Answer Source

Try this instead. You should pass the navigator for rendering in the entry point.Stack navigator will auto load the screen1 component. The navigation prop will be available then only.

Piper.js

/**
 * @flow
 */
 import { StackNavigator } from 'react-navigation';
 const React = require('React');
 const Screen1 = require('./intro/Screen1');
 const Screen2 = require('./intro/Screen2');

 const piperRoute = StackNavigator({
    Screen1: { screen: Screen1},
    Screen2: { screen: Screen2},
  });

 class Piper extends React.Component {
   constructor() {
     super();
   }
   render(): React.Node {
     return (
       <piperRoute/>         
     );
   }
 }
module.exports = Piper;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download