React Native navigation

2018 02 27 2 Comments

Firstly

Install react-navigation

npm install react-navigation --save
react-native link

In App.js dont forget to import react-navigation

import React, { Component } from 'react';

import First from './First';
import Second from './Second';

import {
    StackNavigator,
} from 'react-navigation';
  

const App = StackNavigator(
    {
        First: { screen: First},
        Second: { screen: Second},
    },
    {
      initialRouteName: 'First',
    }
);

export default App;

First.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Button
} from 'react-native';



import { NavigationActions } from 'react-navigation';

class First extends React.Component {
	static navigationOptions = {
	  title: 'First view',
	};
	render() {
	  const { navigate } = this.props.navigation;
	  return (
		<Button
		  title="Go second"
		  onPress={() =>
			navigate('Second', { name: 'test' })
		  }
		/>
	  );
	}
}


export default First;

Second.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View, Button
} from 'react-native';

class Second extends React.Component {
	static navigationOptions = {
	  title: 'Second',
	};
	render() {
	  const { navigate } = this.props.navigation;
	  return (
		<Button
		title="Go back"
		onPress={() => this.props.navigation.goBack()}
		/>
	  );
	}
}


export default Second;

Good luck.

2 responses to “React Native navigation”

  1. Mehtap says:

    Çok sade ve anlaşılır, çok teşekkür ediyorum.

Leave a Reply

Your email address will not be published. Required fields are marked *