Navigation.getParam не определен при попытке передать функцию в качестве параметра

Question

Я пытаюсь использовать функцию из моего основного компонента в моем компоненте подробностей, на которую я реагирую пользователем, чтобы перейти к ней, и я хочу сохранить некоторые изменения в подробном экране в моем главном компоненте

// Main.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     ScrollView,
     TouchableOpacity,
     KeyboardAvoidingView,
     AsyncStorage
    } from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    };
  }
render() {

    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val}
      goToDetailPage= {() => this.goToNoteDetail(key)}
       />
    });
    const { navigation } = this.props;
    return(
        <View style={styles.container}>
         <ScrollView style={styles.scrollContainer}>
                {notes}
            </ScrollView>
           <Details saveEdit={this.saveEdit} />
        </View>

      );
    }
    goToNoteDetail=(key)=>{   
      this.props.navigation.navigate('DetailsScreen', {
        selectedTask: this.state.noteArray[key],
        saveEdit: this.saveEdit
      });
    }
     saveEdit = (editedTask,dueDate) => {
     this.state.noteArray.push({ 
    'creationDate': editedTask['creationDate'], 
    'taskName': editedTask['taskName'],
    'dueDate': dueDate
  });
  this.setState({noteArray:this.state.noteArray})
  this.saveUserTasks(this.state.noteArray) 
}    
      this.setState({noteArray:this.state.noteArray})
      this.saveUserTasks(this.state.noteArray) 
    }     
}

Затем я пытаюсь использовать его в качестве реквизита в своем Detail.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     Button,
     TouchableOpacity,

    } from 'react-native'
import { createStackNavigator, createAppContainer } from "react-navigation";

export default class Details extends React.Component {

   constructor(props){
    super(props);
   this.state = {
    dueDate = ''
   }
  }

  static navigationOptions = {
    headerStyle: {
      backgroundColor: '#f4511e',
    },  
  };

  componentDidMount = () => {
  this.getUserTasks()  
  } 
  render() {

    const { navigation } = this.props;
    const selectedTask = navigation.getParam('selectedTask', 'task');
    var { saveEdit} = this.props;

    return(
     <View key={this.props.keyval} style={styles.container}>
      <View style = { styles.info}>
              <Text style= {styles.labelStyle}> Due date:
              </Text>
              <TextInput
                        onChangeText={(dueData) => this.setState({dueData})}
                        style={styles.textInput}
                        placeholder= {selectedTask['dueDate']}  
                        placeholderTextColor='gray'
                        underlineColorAndroid = 'transparent'
                        >
              </TextInput>
      </View>
      <TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)} style={styles.saveButton}>
                <Text style={styles.saveButtonText}> save </Text>
      </TouchableOpacity>
    </View>
    );
  }
} 

Я много искал, чтобы найти решение, и я пробовал многие из них, но получаю разныенеопределенные ошибки.Это не то, что я делал в первую очередь, но когда я искал, я нашел это решение здесь .И я знаю, что это вызывает много проблем.Я хочу знать, как мне удается получить доступ к основному методу из деталей и передать ему параметры или как мне удается использовать основные реквизиты в моем компоненте деталей

Answer 1

Я пытался запустить ваш код на моей машине, но, похоже, в вашем коде слишком много синтаксических ошибок (может быть, из-за копирования пасты?)

, но вам, вероятно, следует изменить

<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)}

в Detals.js до

<TouchableOpacity onPress={this.props.navigation.getParams('saveEdit')(selectedTask, this.state.dueDate)}

для разъяснения, это сработало для меня в MainPage.js

    _test(){
      console.log('test');
    }
.
.

.
<ActionButton
     buttonColor="rgba(231,76,60,1)"
     onPress={() => NavigationService.navigate('AddNewSession', {test: this._test})}>
</ActionButton>

и в AddNewSession.js

  componentDidMount() 
    let test = this.props.navigation.getParam('test');
    test();
  }

Answer 2

Решение

<Details saveEdit={this.saveEdit} />

до

<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />

render() {
    return(
        <View style={styles.container}>
         <ScrollView style={styles.scrollContainer}>
                {notes}
            </ScrollView>
           <Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
        </View>

      );
}

Почему?

Вы используете Details компонент на экране Main. Так что вам нужно отдать navigation реквизитам Details от вашего Main, чтобы использовать navigation props в Details компоненте.

Поскольку ваш компонент Details не является компонентом экрана, зарегистрированным в вашем навигаторе (маршрутизаторе).