Ошибка, когда задний экран из заголовка навигации: undefined не является объектом (оценка 'this.props.navigation.navigate')

Question

Я новичок в реакции на родную.Я пытаюсь закрыть экран при нажатии кнопки в статической навигацииОпции, но получаю ошибку, подобную этой

Мой код здесь:

import React from 'react';

import { Button, View, Text ,Image } from 'react-native';
import { createStackNavigator } from 'react-navigation'; // Version can be specified in package.json
import Mylistview from './Mylistview.js'
import { TouchableOpacity } from 'react-native'

class HomeScreen extends React.Component {

  static navigationOptions = {
    header: null ,
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class BackClass extends React.Component {

}

class DetailsScreen extends React.Component {



 static navigationOptions = {
    headerLeft: //<BackClass />,

      <Button
          title="Go back"
          onPress={() =>this.props.navigation.goBack(null)}   //problem is here
        />,


    headerTitle: (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row'
       , justifyContent: 'space-between' ,  backgroundColor: 'black'}}>
      <Button
        style={{ width: 130, height: 30,flex: 1, alignItems: "center",  justifyContent: 'center'}}
        onPress={() => alert('This is a button!')}
        title="Info change"
        color="#fff000"
      />

  <Button
        style={{ height: 30, alignItems: "center",  justifyContent: 'center'}}
        onPress={() => alert('This is a button!')}
        title="second"
        color="#fff000"
      />

       </View>
    ),

   // headerStyle: {
    //    elevation: 0,
   //     shadowOpacity: 0
    //  }
    headerStyle: {
        height: 50,
        backgroundColor: 'green',
        shadowColor: 'red',
        shadowRadius: 5,
        shadowOpacity: 0.1,
        shadowOffset: {
          height: 1,
          width: 0,
        },
      },
     // titleStyle: { color: 'red' },
     // left: <Text style={{color: 'red'}} onPress={() => navigation.goBack()}>LEFT</Text>,
     // right: <Text style={{color: 'red'}} onPress={() => navigation.goBack()}>RIGHT</Text>,
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again once"
          onPress={() => this.props.navigation.push('Details')}
        />
        <Button
          title="Go to List"
          onPress={() => this.props.navigation.push('List1')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

class ListScreen extends React.Component {
  render() {
return (
      <Mylistview />
   )
}
}

const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,

      // navigationOptions: {
      //  title: 'screenA',
      // }    
  // navigationOptions: {
  //    header: {
   //     visible: false
  //    }
  //  }
    },
    Details: {
      screen: DetailsScreen,
    },
    List1: {
      screen: ListScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}


//"react-navigation": "^1.0.0-beta.7"

Answer 1

Если вы хотите использовать функцию навигации из компонента заголовка навигации, вам нужно сделать это так:

static navigationOptions = ({navigation}) => ({
   headerRight:  <Button
      title="Go back"
      onPress={() => navigation.goBack()}
    />,
 })