如何将我的道具添加到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;

中使用handleSubmit（）在登录> addtask.js，我得到了不确定的。我该如何实现上述问题？

Answer 1

您必须使用initialParams在这里

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

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

PS通过此处传递功能可能会发出警告