如何在 react-native 应用程序中将我的道具添加到堆栈屏幕

Question

我正在用 react-native 构建一个待办事项列表应用程序。 我是初学者来学习它。 我在App.js文件中有一个函数名handleSubmit()和一个状态data 。 我想在各自的组件/屏幕中将它们作为道具传递。

这是我的尝试：

App.js

import React, { useState } from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Welcome from './Screens/Welcome';
import Tasklist from './Screens/Tasklist';
import Addtask from './Screens/Addtask';

const Stack = createNativeStackNavigator();


export default function App() {

  const [data,setData] = useState([]);

  const handleSubmit = (task) => {
    console.log("submit pressed")
    setData((prevtodo)=> {
      return [
        {
          task:task,
          key: Math.random().toString(),
        },
        ...prevtodo
      ];
    });
  }
  
  return (
    
    <NavigationContainer>
      <Stack.Navigator screenOptions={{header: ()=>null}}>
        <Stack.Screen name='Welcome' component={Welcome}></Stack.Screen>
        <Stack.Screen name='Tasklist' component={Tasklist} data={data}></Stack.Screen>
        <Stack.Screen name='Addtask' component={Addtask} handleSubmit={handleSubmit}></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在组件Addtask中，我是这样使用的

import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import { StatusBar } from "expo-status-bar";

const Addtask = ({navigation, handleSubmit}) => {
 
  console.log(handleSubmit)

  const [task, setTask] = useState("");

  return (
    <View style={styles.container}>
      <StatusBar style="light" backgroundColor="midnightblue" />
      <View>
        <Text style={styles.text}>Add Task Here</Text>
      </View>

      <View>
        <TextInput
          style={styles.input}
          onChangeText={setTask}
          value={task}
          placeholder="Type your task"
          keyboardType="ascii-capable"
        />
      </View>

      <View style={styles.buttoms}>
        <View style={{margin:4}}>
          <Button color={'red'} onPress={()=>{navigation.goBack()}} title="Cancel"></Button>
        </View>
        <View style={{margin:4}}>
          <Button color={'lightblue'} onPress={()=>setTask('')} title="Clear"></Button>
        </View>
        <View style={{margin:4}}>
          <Button color={'green'} onPress={handleSubmit} title="Save"></Button>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  .
  .
  .
  .

});
export default Addtask;

在Addtask.js中记录handleSubmit()时，我得到undefined 。 我怎样才能实现上述目标？

Answer 1

你必须在这里使用initialParams

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

您可以在此处参考文档https://reactnavigation.org/docs/params/#initial-params

PS 在此处传递函数可能会发出警告