Search code examples
javascriptreact-nativeurl-routing

How can I use Navigator in the newest version of React Native?


Here is my code:

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

import Component5 from './app/components/component5/component5.js';
import Component6 from './app/components/component6/component6.js';

export default class myproject extends Component {
  renderScene(route, navigator){
    switch(route.id){
      case 'component5':
        return(<Component5 navigator={navigator} title="component5" />)
      case 'component6':
        return(<Component6 navigator={navigator} title="component6" />) 
    }
  }

  render() {
    return (
      <Navigator
        initialRoute={{id:'component5'}}
        renderScene={this.renderScene}
        configureScreen={(route, routeStack) => Navigtator.SceneConfigs.FloatFromBottom}
      />
    );
  }
}


AppRegistry.registerComponent('myproject', () => myproject);

When I run it, it throws this error:

enter image description here

First of all, why Navigator is deprecated in the latest version? And what should I do now? I hardly think installing a deprecated thing be a good idea.


Solution

  • Forget about navigator, use react-navigation.

    link: https://reactnavigation.org