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

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

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);

我希望它可以帮到你:)。

Answer 2

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

以下是一个例子：

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)