解决方案

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

我进行了大量搜索以查找解决方案，并尝试了许多解决方案，但遇到了不同的未定义错误。这不是我最初要做的，但是当我搜索时发现了此解决方案here。而且我知道这会引起很多问题。我想知道如何管理从细节访问主方法并将参数传递给它，或者如何在细节组件中使用主道具

Answer 1

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

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组件不是在导航器（路由器）中注册的屏幕组件。

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

Answer 4

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

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

这让我觉得您不知道堆栈导航或一般功能的导航如何响应本机。您应该有一个处理路由配置的文件，将其命名为MyNavigation.js，然后在MyNavigations，js中定义路由“ Main”和“ details”。您只能在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?.();
  }

尝试将函数作为参数传递时，Navigation.getParam未定义

4 个答案:

解决方案

为什么？