react-native-navigation 无法导航到另一个页面

Question

我进行了搜索并将其与正确的解决方案进行了比较，看起来没有任何问题，但我几乎得到如下所示的错误屏幕；

这里的导航代码有什么问题；

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import About from './app/components/About';

export default class Home extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  navigateToAbout(){
    const { navigate } = this.props.navigation;
    navigate('About')
  }

  render() {

    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>this.navigateToAbout()}>
          <Text>Go to About Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const SimpleApp = StackNavigator({
  Home: { screen: Home },
  About: { screen: About },
});

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

Answer 1

您没有将 home 组件与导航连接，您应该将 navigation 方法传递给 connect 方法的 mapDispatchToProps 对象。

这是一个例子：

import { connect } from 'react-redux'
import { NavigationActions } from 'react-navigation'

const navigate = NavigationActions.navigate

export class Home extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Welcome',
  })
  static propTypes = {
    navigate: T.func.isRequired,
  }

  navigateToAbout(){
    const { navigate } = this.props.navigation;
    navigate({ routeName: 'About' })
  }

  render() {

    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>this.navigateToAbout()}>
          <Text>Go to About Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default connect(null, { navigate })(Home)

Answer 2

我认为你的代码很好，除非你必须绑定方法（通常我使用箭头函数，但如果你想在你的构造函数中绑定方法也没关系），也许你可以这样尝试：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import About from './app/components/About';

export default class Home extends Component {
  static navigationOptions = {
    title: 'Welcome',
  }

  navigateToAbout = () => {
    this.props.navigation.navigate('About');
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={ this._navigateToAbout }
          <Text>Go to About Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const SimpleApp = StackNavigator({
  Home: { screen: Home },
  About: { screen: About },
});

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

希望对您有所帮助:)

react-native-navigation 无法导航到另一个页面

react-native-navigation cant navigate to another page

react-native

react-native-navigation