你好我试图创建一个待办事项列表中的React原生和我有一个addtask组件是用于输入和添加按钮我想使用从添加任务组件的输入来创建一个新的任务与app.js.所以我怎么能通过输入数据后，我点击了加号按钮的应用程序组件。即使只是打印它作为一个文本在屏幕上，我只是不知道如何通过它
app.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Task from './components/Task';
import AddTask from './components/AddTask';



export default function App() {

  const [todos, setTodos]= useState([
    {text:'hello', key:'1'},
  ]);
  

  return (
    <View style={styles.container}>
      <View style={styles.taskWrapper}>
        <Text style={styles.header}>Today's Tasks</Text>
      </View>

        <View style={styles.tasks}>
          <Task />
        
          <Task text={''} />
          <Task text={''} />
      </View>

      <View style={styles.addTask}>
        <AddTask />
      </View>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8EAED',
  },
  taskWrapper: {
    paddingTop: 80,
    paddingHorizontal: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  tasks: {
    flex: 1,
  },
  addTask: {
    paddingBottom: 20,
  },
});

addtask.js

import React from 'react';
import { View, Text,Keyboard, StyleSheet, TextInput, TouchableOpacity,TouchableWithoutFeedback, } from 'react-native';
import KeyboardAvoidingView from 'react-native/Libraries/Components/Keyboard/KeyboardAvoidingView';
import { useState } from 'react';
import Task from './Task';


const AddTask = () => {
    const [task, setTask] = useState('');
    const [taskItems, setTaskItems] = useState([]);
    
    const handleAddTask = () => {
        setTaskItems([...taskItems, task]);
        setTask('');
        console.log(taskItems);
        return(
            taskItems
        );
      };
    

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.input} value = {task} onChangeText={text => setTask(text)} placeholder={'Write a task'} />
      </View>
      <TouchableOpacity onPress={() => console.log(task)}>
        <View style={styles.plusButton}>
          <Text style={styles.plus}>+</Text>
        </View>
      </TouchableOpacity>
    </View>
    </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  inputContainer: {
    flex: 1,
    marginRight: 10,
  },
  input: {
    height: 60,
    borderWidth: 1,
    
    padding: 10,
    borderRadius: 60,
    backgroundColor: '#fff',
    borderColor: 'white',
  },
  plusButton: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderColor: 'white',
  },
  plus: {
    fontWeight: 'bold',
    fontSize: 24,
    color: '#E8EAED',
  },
  Task:{
        backgroundColor: '#fff',
        padding: 20,
        marginTop:10,
        marginHorizontal:20,
        borderRadius:10,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        marginBottom:20,
    },

});

export default AddTask;