javascript - 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 },
})

当我像这样编写代码时，会发生错误，因为第 12 行 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;

您还可以查看工作解决方案 link expo

希望对你有帮助。有疑问请随意