【问题标题】：Navigation.getParam is undefined while trying to pass function as parameter尝试将函数作为参数传递时，Navigation.getParam 未定义
【发布时间】：2019-10-18 03:34:33
【问题描述】：

我正在尝试在我的详细信息组件中使用我的主要组件中的一个功能，我用户反应导航以导航到该功能，并且我想在我的主要组件中保存详细屏幕中的一些更改

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

我进行了很多搜索以找到解决方案，我尝试了其中的许多方法，但得到了不同的未定义错误。这不是我最初所做的，但是当我搜索时，我发现了这个解决方案here。我知道这会导致很多问题。我想知道如何设法从 details 中访问 main 方法并将参数传递给它，或者如何设法在我的 details 组件中使用 main props

【问题讨论】：

标签： react-native react-navigation react-props

【解决方案1】：

如果你使用 react-navigation 5，params 不再在导航对象下，而是在路由对象下。这是示例代码的链接： https://reactnavigation.org/docs/params

【讨论】：

【解决方案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>

      );
}

为什么？

您正在Main 屏幕中使用您的Details 组件。因此，您需要将Main 中的navigation 的道具提供给Details，以便在Details 组件中使用navigation props。

因为您的Details 组件不是在您的导航器（路由器）中注册的屏幕组件。

【讨论】：

谢谢，对不起，我不明白你的问题。我在 App.js 中使用 createStackNavigator 声明我的导航。然后我必须导航到详细信息，用户将对所选项目进行更改，我想保存它。我可以通过调用 Main 中的 save 方法或将 noteArray 传递给 details 并将其保存在那里
你的解决方案让我在一个视图中同时拥有两个组件，这不是我想要的！
我刚刚回答了如何解决您的Navigation.getParam is undefined。你试过了吗？只需将Main 组件中的渲染代码更改为我推荐的
是的，我做到了，它消除了我的错误，但它扰乱了我的观点。请阅读我的解释。我想在我的详细视图中保存更改。我没有必要通过方法。如果我设法详细使用主要道具和状态就足够了
@Niloufar 我的代码不会改变你的看法。没有代码可以更改任何布局。您的问题是关于如何从您的代码中解决 Navigation.getParam is undefined 错误。这就是这篇文章的全部内容。

【解决方案3】：

我试图在我的机器上运行您的代码，但您的代码中似乎有太多语法错误（可能是因为复制意大利面？）

但看来你应该改变

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

【讨论】：

其实我已经三天开始用 react native 写代码了。当我在这里粘贴我的代码并删除了不必要的部分以简要说明你得到错误时，我在我的 App.js 中使用 createStackNavigator 声明我的导航。然后我必须导航到详细信息，用户将对所选项目进行更改，我想保存它。我可以通过从 Main 调用 save 方法或将 noteArray 传递给 details 并将其保存在那里来做到这一点。有什么解决办法吗？
这似乎是一个非常简单的问题，我建议您在 Detail.js 中进行所有更改和编辑，这样您就不需要传递函数了。尽管正如我在回答中所说，我认为您只需要更改 this.props.saveEdit，其余代码似乎还可以

【解决方案4】：

您的代码中有很多错误。首先，您在所有文件 Main.js 和 Details.js 中导入导航内置函数 {createStackNavigator} ：

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

这让我觉得你不知道堆栈导航或一般导航在本机反应中的作用。您应该有一个处理您的路线配置的文件，我们将其命名为 MyNavigation.js，然后在 MyNavigations,js 中定义路线“主要”和“详细信息”。只有在 MyNavigation.js 中才能导入“createStackNavigator”。然后您将定义您的功能以在屏幕“主要”和“详细信息”之间移动。当在彼此之间移动时，这些功能将作为道具传递给路线。 MyNavigation.js 的整体操作如下所示：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Main from './Main';
import Detail from './Detail';
const Stack = createStackNavigator();

function goToDetailFromMainScreen(){
     return(this.props.navigation.navigate('switch2'));
      }
function DetailSaves(){
     return(//your code here to save details);
      }

 //Here you pass the functions to Main Component to handele Detail componets 
   's actions

function switch1(){
  return(<Main GoToDetails={() => this.goTodetailFromMainScreen()} paramsForDetailActions={() => this.detailSaves()} />)
}

function switch2(){
  return(<Details />)
}

export default function MyNavigation() {
  return(
  <NavigationContainer>
    <Stack.Navigator initialRouteName='switch1'>
       <Stack.Screen name='switch1' options={{header:()=>null}} component={Main} />
       <Stack.Screen name='switch2' options={{headerTitle:"Detail"}} component={Detail} />
    </Stack.Navigator>
  </NavigationContainer>
)
}

现在在 Main.js 中检查从 MyNavigation.js 传递给它的 props 函数：

// Main.js

constructor(props){
    super(props);
  }

  goToDetails = () => {
    this.props.onPress?.();
  }
   paramsForDetailActions= () => {
    this.props.onPress?.();
  }

【讨论】：