this.props.navigation 未定義（createStackNavigator）

Question

我想在 ReactNative 上創建一個簡單的導航示例。

這是下面的代碼；

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';

class Home extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home</Text>
        <Button
          title="To the detail Page"
          onPress={() => this.props.navigation.navigate('DetailScreen')}
        />
      </View>
    );
  }
}

class Detail extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Detail Page</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  HomeScreen: { screen: Home },
  DetailScreen: { screen: Detail },
})

當我這樣編碼時，會發生錯誤，因為 Line12 this.props.navigation未定義。

有沒有人有辦法解決嗎？

Answer 1

請嘗試以下代碼：

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

      createAppContainer
    } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

class Home extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home</Text>
        <Button
          title="To the detail Page"
          onPress={() => this.props.navigation.navigate('DetailScreen')}
        />
      </View>
    );
  }
}

class Detail extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Detail Page</Text>
      </View>
    );
  }
}

const APpStack =  createStackNavigator({
  HomeScreen: { screen: Home },
  DetailScreen: { screen: Detail },
})

const App = createAppContainer(APpStack);

export default App;

您還可以查看工作解決方案鏈接博覽會

希望能幫助到你。 隨意懷疑

Answer 2

您需要一個構造函數來定義用於存儲導航數據（以及其他）的屬性：

class Home extends React.Component {
  constructor(props) {
    super(props);
    // ...
  }