undefined не является объектом (оценивая this.props.navigation.navigate)

Question

undefined не является объектом (оценивая this.props.navigation.navigate)

1

Я пытаюсь научиться реагировать на уроки в первый раз. Я попытался ввести файл-стек, но строка const {navigate} = this.props.navigation; вызывает ошибку:

undefined не является объектом (оценка "this.props.navigation.navigate")

Вот мой код:

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

export default class App extends Component {
  static navigationOptions = {
    title: "Login",
    headerStyle: {
      backgroundColor: "#000000"
    },
    headerTitleStyle: {
      color: "#fff"
    }
  };

  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props);

    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

const myscreens = StackNavigator({
  Home: { screen: App }
});
AppRegistry.registerComponent("app", () => myscreens);

Что я делаю неправильно и как это исправить?

Я должен также упомянуть, что реквизит пуст в функции рендеринга и в конструкторе.

здесь мой пакет.json incase it matter

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "devDependencies": {
    "babel-jest": "21.0.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.1.0",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

И вот мой index.android.js

import React, { Component } from 'react';
import App from './components/app';
import {
  AppRegistry,
  View
} from 'react-native';

export default class myapp extends Component {
  render() {
    return (
        <App />
    );
  }
}


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

John 18 сен. 2017, в 19:38

Источник

0

Я только что создал новый проект с только что установленной react-navigation и не получил никакой ошибки. Возможно опубликовать свой package.json ?
Michael Cheng 18 сен. 2017, в 18:32
0

@MichaelCheng хорошо, спасибо, я только что добавил свой package.json и index.android.js. Надеюсь, это поможет?
John 18 сен. 2017, в 18:43

Теги:

javascript

react-native

react-navigation

1 ответ

Ещё вопросы

Я только что создал новый проект с только что установленной react-navigation и не получил никакой ошибки. Возможно опубликовать свой package.json ?
@MichaelCheng хорошо, спасибо, я только что добавил свой package.json и index.android.js. Надеюсь, это поможет?

Michael Cheng · Accepted Answer · 2017-09-18T17-30-00.000Z

Две ошибки:

Вы не должны дважды звонить в AppRegistry. Его можно удалить из файла app.js
Вы не понимаете, как работают маршрутизаторы с react-navigation. StackNavigator (и вкладка и ящик) - это компоненты, которые необходимо визуализировать либо напрямую (например, что вы передаете в AppRegistry [A]), либо в какой-то момент вашего приложения [B].

Поэтому, чтобы исправить это, вы захотите экспортировать myscreens вместо App. Чтобы проиллюстрировать оба способа сделать это:

О. Вы можете увидеть пример этого в документах, но, поскольку вы разбиваете свой код на два файла, это будет выглядеть так:

./components/app.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import { Text, View } from 'react-native';

class App extends Component {
  static navigationOptions = {
    title: 'Login',
    headerStyle: {
      backgroundColor: '#000000',
    },
    headerTitleStyle: {
      color: '#fff',
    },
  };

  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props);

    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

const myscreens = StackNavigator({
  Home: { screen: App },
});

export default myscreens;

index.android.js

import { AppRegistry } from 'react-native';
import myscreens from './components/app';

AppRegistry.registerComponent('myapp', () => myscreens);

B. Вы будете отображать StackNavigator в другом классе, а затем экспортируете класс, который его отображает. Это больше соответствует тому, что вы уже делаете, и более гибко в долгосрочной перспективе (например: вам нужно будет это сделать, если вы в какой-то момент используете redux), поэтому вы должны, вероятно, сделать это следующим образом:

./components/app.js - Обратите внимание на изменение корпуса для myscreens в MyScreens. Это необходимо, так как React Native будет жаловаться на это, поскольку строчные теги JSX считаются HTML. Использование AppRegistry напрямую не AppRegistry эту ошибку, поскольку вы не используете myscreens в JSX.

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import { Text, View } from 'react-native';

class App extends Component {
  static navigationOptions = {
    title: 'Login',
    headerStyle: {
      backgroundColor: '#000000',
    },
    headerTitleStyle: {
      color: '#fff',
    },
  };

  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props);

    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

const MyScreens = StackNavigator({
  Home: { screen: App },
});

export default MyScreens;

index.android.js

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import MyScreens from './components/app';

export default class myapp extends Component {
  render() {
    return <MyScreens />;
  }
}

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