导航到其他页面在 render() 调用中有效，但在单独的函数中无效

Question

我正在使用 react-navigation 第三方组件，这是我的代码：

import { StackNavigator } from 'react-navigation';

// ==============
// Profile Screen
// ==============
class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile',
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Text>Profile Page</Text>
            <TouchableHighlight onPress={() => navigate('Detail')}>Next</TouchableHighlight>
        </View>
    );
  }

  onEditProfile(event) {
    () => navigate('Detail');
  }
}

// ==============
// Detail Screen
// ==============
class DetailScreen extends React.Component {
  static navigationOptions = {
    title: 'Detail',
  }

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

// ==============
// Routing
// ==============
const ModelStack = StackNavigator({
    Profile: { screen: ProfileScreen },
    Detail: { screen: DetailScreen },
});

AppRegistry.registerComponent('ModelStack', () => ModelStack);
export default ModelStack;

在<TouchableHighlight>的onPress事件中，有效；当我如上所示将确切内容放入 onEditProfile() 时，它不起作用。为什么？如何将动作放入函数中？

附加问题：

~~如何在导航（推送）到下一页时更改 "Back" 措辞？~~ 更新：我找到了，可以通过headerBackTitle in navigationOptions
我可以将 ProfileScreen & DetailScreen class 移动到单独的 JS 文件吗？

更新：更新代码onPressEditProfile：

onPressEditProfile(event) {
    const { navigate } = this.props.navigation;
    console.log('Clicked Edit Profile');
    () => navigate('Detail');
}

以上代码引发了以下错误：

undefined is not an object (evaluating 'this.props.navigation')

错误行在onPressEditProfile函数的第一行。

Answer 1

在函数中添加这一行

const { navigate } = this.props.navigation;

是的，你可以做到。您可以在单独的文件中为所有屏幕声明导航常量并导出该常量。然后为不同的屏幕制作不同的文件并导航到这些屏幕。

更新代码

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

import {
  Text,
  View,
  TouchableHighlight,
} from 'react-native';
// ==============
// Profile Screen
// ==============
class ProfileScreen extends Component {
  static navigationOptions = {
    title: 'Profile',
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Text>Profile Page</Text>
            <TouchableHighlight onPress={() => this.onEditProfile()}><Text>Next</Text></TouchableHighlight>
        </View>
    );
  }

  onEditProfile() {
     const { navigate } = this.props.navigation;
     navigate('Detail');
  }
}

// ==============
// Detail Screen
// ==============
class DetailScreen extends Component {
  static navigationOptions = {
    title: 'Detail',
  }

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

// ==============
// Routing
// ==============
const ModelStack = StackNavigator({
    Profile: { screen: ProfileScreen },
    Detail: { screen: DetailScreen },
});


export default ModelStack;

导航到其他页面在 render() 调用中有效，但在单独的函数中无效

Navigation to other page works in render() call but not in separate function

javascript

react-native

react-navigation