React Native Navigator deprecated and has been removed this package. Hatası

[feyzialpar]

navigator deprecated and has been removed this package. It can now be installed and imported from 'react-native-deprecated-custom-components' instead of 'react-native'. Learn about alternative navigation solutions.

[feyzialpar]

Arastırdıgım kadarıyla navigator kaldırılmıs yazıyor yerine navigation getirilmis

[abdurrahmanekr]

React native tahminimden hızlı gelişiyor bazı şeylerin modası geçti demek ki. Yeni kullanımı bu şekilde olmalı https://facebook.github.io/react-native/docs/navigation.html

[abdurrahmanekr]

Basit kullanımı şu şekildeymiş:

npm install --save react-navigation

...
import {
  StackNavigator,
} from 'react-navigation';
...
render() {
    const App = StackNavigator({
      Start: { screen: StartPage },
      Main: { screen: MainPage },
      Login: { screen: LoginPage },
    });
    return (
      <App ref={nav => { this.navigator = nav; }} />
    );
  }
...

[feyzialpar]

Tesekkur ederim

[feyzialpar]

undefined is not an object (evaluating'_this2.props.navigator.push') boyle bir hata alıyorum ikinci videonun sonuna kadar kı kodları yazmayı bitirince

[abdurrahmanekr]

@feyzialpar merhaba soruya geç cevap veriyorum kusuruma bakma. StackNavigator kullanarak işlem yaptın değil mi ?

[feyzialpar]

Evet

[feyzialpar]

import React from 'react';

import {AppRegistry, StyleSheet, Text, View} from 'react-native'; import {StackNavigator,} from 'react-navigation';

import LoginPage from './src/page/login-page/login-page'; import MainPage from './src/page/main-page/main-page'; import StartPage from './src/page/start-page/start-page';

export default class Project extends React.Component {

render(){ const Project =StackNavigator({ Start:{screen:StartPage}, Main:{screen:MainPage}, Login:{screen:LoginPage},

}); return( <Project ref={nav=>{this.navigator=nav;}}/> ); } } AppRegistry.registerComponent('Project',()=>Project)

[feyzialpar]

Degisiklige bu sekilde yaptım eksik bir sey var mı

[feyzialpar]

Biraz hızlı yanıt verirseniz memnun olurum

[abdurrahmanekr]

@feyzialpar Konuyu araştırdım ve bir sonuca vardım. Kullanımı push şeklinde değil key şeklindeymiş. Hatayı veren yer start-page.js isLoginControl fonksiyonu. Orada bulunan ve yönlendireceğin yerleri self.props.navigation.navigate('MainPage'); şeklinde yapman gerekiyor. Bu yapının aynısını buraya ekledim. Basitçe index.ios.js :

import React from "react";

import { AppRegistry, StyleSheet, Text, View } from "react-native";
import { StackNavigator } from "react-navigation";

import LoginPage from "./src/pages/login-page/login-page";
import MainPage from "./src/pages/main-page/main-page";
import StartPage from "./src/pages/start-page/start-page";

export default class LoginApp extends React.Component {

  render() {
    const LoginApp = StackNavigator({
      StartPage: { screen: StartPage },
      MainPage: { screen: MainPage },
      LoginPage: { screen: LoginPage }
    });
    return (
      <LoginApp
        ref={nav => {
          this.navigator = nav;
        }}
      />
    );
  }
}
AppRegistry.registerComponent("LoginApp", () => LoginApp);

start-page.js :

...
async isLoginControl() {
  var self = this;
  isLogin().then((res) => {
    if (res)
      self.props.navigation.navigate('MainPage');
    else
      self.props.navigation.navigate('LoginPage');
  })
}
...

Son yönlendirme de main-page.js dosyasında yapılıyor :

...
.then((res) => {
  if (res.session_ticket)
    setSessionTicket(String(res.session_ticket));

  if (res.result != -1)
    self.props.navigation.navigate('MainPage'); // burası
  else
    Alert.alert("Kullanıcı doğrulanamadı");
})
.catch((err) => {
  Alert.alert("Bir sorun oluştu " + err);
})
...

Eğer başarılı olunca dönüş yaparsan mutlu olurum. Yine bir hata ile karşılaşıyorsan dönüş yap.

[feyzialpar]

the development server returned response error code:500 URL:http://packagerçib-5im.feyzialpar.project.exp.irect/node_modules/react-native -scripts/build/bin/crna-entry.bundle?platform=android&dev=true&strict=false&minify?false&hot=false&asetPlugin=expo/tools/hash/hashAssetFiles Body: {"from":"C:\Users\Feyzi\Desktop\Project\App.js","to":"react-navigation","message":"Unable to resolve module'react-navigation' from 'C:\Users\Feyzi\Desktop\Project\App.js':Module does not exist in the module map or in these directories:\n C:\Users\Feyzi\Desktop\Project\node_modules\n, C:\Users\Feyzi\node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1.Clear watchman watches:'watchman watch-del-all'.\ln 2.Delete the'node_modules' forder : 'rm-rf node_modules &&npm install'.|n 3.Reset packager cache:'rm-fr $TMPDIR/react-*' or 'npm start -- -- reset-cache'. "," name":"UnableToResolveError","type":"UnableToResolveError","errors":[{]}

Bu hatayı alıyorum

[feyzialpar]

İndex.js

import React from "react";

import { AppRegistry, StyleSheet, Text, View } from "react-native"; import { StackNavigator } from "react-navigation";

import LoginPage from "./src/pages/login-page/login-page"; import MainPage from "./src/pages/main-page/main-page"; import StartPage from "./src/pages/start-page/start-page";

export default class Project extends React.Component {

render() { const Project = StackNavigator({ StartPage: { screen: StartPage }, MainPage: { screen: MainPage }, LoginPage: { screen: LoginPage } }); return ( <Project ref={nav => { this.navigator = nav; }} /> ); } } AppRegistry.registerComponent("Project", () => Project);

[feyzialpar]

Start-Page

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

export default class StartPage extends Component {

constructor(props){ super(props) } render() { return ( async isLoginControl() { var self = this; isLogin().then((res) => { if (res) self.props.navigation.navigate('MainPage'); else self.props.navigation.navigate('LoginPage'); }) } ); } }

[feyzialpar]

Login-Page

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, TextInput, // girdiler için Button // tıklamak için } from 'react-native';

export default class LoginPage extends Component {

constructor(props) {
    super(props); // super arguman geçmenizi sağlar eğer constructor kullanmak isterseniz kullanmak zorunlu oluyor.
    this.navigator = this.props.navigator; // index.ios.js de navigator diğer geçtiğimizi burada aldık
}

// giriş isteği atacağımız ve yükleceğimiz fonksiyon
goLogin() {

}

render() {
    return (
        <View
            style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
                padding: 15
            }}>
            <View>
                <TextInput
                    style={{
                        height: 50
                    }}
                    placeholder="Kullanıcı adı"/>
            </View>
            <View>
                <TextInput
                    style={{
                        height: 50
                    }}
                    placeholder="Şifre"/>
            </View>
            <View
                style={{
                    height: 50
                }}>
                <Button
                    title="Giriş" // butonun yazısı
                    color="#4285f4" // arkaplan rengi
                    onPress={this.goLogin.bind(this)} /* butona tıklandığında tetiklenecek fonksiyon*/ />
            </View>
        </View>
    );
}

}

[feyzialpar]

Login-Page

import React from 'react'; import {Text} from 'react-native'; export default class MainPage extends Component { render() { return ( .then((res) => { if (res.session_ticket) setSessionTicket(String(res.session_ticket));

if (res.result != -1) self.props.navigation.navigate('MainPage'); // burası else Alert.alert("Kullanıcı doğrulanamadı"); }) .catch((err) => { Alert.alert("Bir sorun oluştu " + err); }) ); } }

[abdurrahmanekr]

hazırda çalışan console varsa onu kapat ve npm install --save react-navigation ardından react-native run-ios komutunu çalıştır.

[feyzialpar]

'react-native' is not recognized as an internal or external command, operable program or batch file. bu hatayı alıyorum cmd ekranın da

[abdurrahmanekr]

react-native kurulu olduğuna emin misin ?

[feyzialpar]

Evet kurulu. Kodları calıstırmak icin Visual Studio Codei Genymıtion ve Expo XDE kullanıyorum

[abdurrahmanekr]

Tekrar çalıştır o zaman

[feyzialpar]

Aynı hatayı almaya devam ediyorum

[abdurrahmanekr]

@feyzialpar Bu issue yorumları artmasın http://twitter.com/abdurrahmanekr twitter üzerinden konuşalım