javascript - 导航到其他页面可以在 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() 时，如上所示，它不起作用。为什么？如何将操作放入函数中？

额外问题:

1. 当导航(推送)到下一页时，如何更改“返回”措辞？ 更新:我找到了，可以通过 headerBackTitle 设置navigationOptions
2. 我可以将 ProfileScreen 和 DetailScreen 类移至单独的 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;