使用React Native底部标签导航将数据从一个屏幕传递到其他屏幕

Question

我是本机反应的新手。我创建了一个简单的待办事项应用程序，可以添加任务，删除任务，并且当任务完成时，我们可以标记一个复选框，该复选框会触及表示任务已完成的项目。我使用了按钮选项卡导航，在其中放置了三个图标，分别是“全部”，“完成”和“未完成”。在“所有”选项卡中，显示所有任务。我现在想的是，每当一个项目被选中它必须移动（转让）该项目（检查），用于“已完成”屏幕和未检查的项目必须显示在“未完”屏幕。我进行了很多搜索，但是找不到确切的解决方案，尤其是底部标签导航。我希望我说清楚

这是我的代码： App.js

import React from "react";
import { StyleSheet, View } from "react-native";
import Header from "./components/TodoComponents/Header";
import NavigationBar from "./components/Navigation/NavigationBar";
export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar
        barStyle="default-content"
        // dark-content, light-content and default
        hidden={false}
        //To hide statusBar
        backgroundColor="transparent"
        //Background color of statusBar
        translucent={false}
        //allowing light, but not detailed shapes
        networkActivityIndicatorVisible={true}
      />
      <Header />
      <NavigationBar />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 0,
    marginHorizontal: 0,
    backgroundColor: "#2D2D2D",
  },
});

TodoApp.js

import { Text, View, StyleSheet, FlatList, Alert } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import TodoItem from "./TodoItem";
import AddItem from "./AddItem";
import Completed from "./Completed";
import Incompleted from "./Incompleted";

export default function TodoApp({ navigation }) {
  // React Hooks declarations
  const [todos, setTodos] = useState([
    { text: "create an app", id: "1", isCompleted: false },
    { text: "buy coffee", id: "2", isCompleted: false },
    { text: "go for walk", id: "3", isCompleted: false },
  ]);

  // delete an item
  const deleteItem = (id) => {
    setTodos((todos) => {
      return todos.filter((todo) => todo.id != id);
    });
  };

  // add items on click
  const submitHandler = (value) => {
    if (!value) {
      Alert.alert(" Enter todo");
      return TodoList;
    }
    const TodoList = [{ text: value, id: Math.random().toString() }, ...todos];
    setTodos(() => {
      return TodoList;
    });
  };

  return (
    <View style={styles.main_container}>
      <AddItem submitHandler={submitHandler} />
      {/* TodoItem lists, here data is todos array and in renderitem item={item} is prop passing to other component*/}
      <View>
        <FlatList
          data={todos}
          renderItem={({ item }) => (
            <TodoItem item={item} deleteItem={deleteItem} />
          )}
        />
      </View>
    </View>
  );
}

// styles
const styles = StyleSheet.create({
  main_container: {
    width: "100%",
  },
});

AddItem.js

import { Text, View, StyleSheet, TextInput } from "react-native";
import Entypo from "react-native-vector-icons/Entypo";

export default function AddItem({ submitHandler }) {
  // React Hooks declarations
  const [text, setText] = useState("");
  const changeHandler = (value) => {
    setText(value);
  };

  return (
    <View style={styles.add_item_fields}>
      <TextInput
        style={styles.text_input}
        placeholder="Enter Todo Item"
        onChangeText={changeHandler} //changeHandler automatically takes value paramter here , and that value=text we enter in input
        //onChangeText={changeHandler} is same as onChangeText={(value) => changeHandler(value)}
      />

      <Entypo
        style={styles.add_icon}
        name="add-to-list"
        onPress={() => submitHandler(text)}
      />
    </View>
  );
}

// styles
const styles = StyleSheet.create({
  add_item_fields: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 20,
    marginBottom: 40,
  },

  text_input: {
    height: 40,
    borderWidth: 1,
    width: "78%",
    paddingLeft: 25,
    borderRadius: 40,
    borderColor: "#C6A569",
    color: "#fff",
  },
  add_icon: {
    fontSize: 30,
    margin: 12,
    color: "#C6A569",
  },
});

TodoItem.js

import {
  StyleSheet,
  View,
  Text,
  CheckBox,
  TouchableOpacity,
} from "react-native";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import moment from "moment";

export default function TodoItem({ item, deleteItem }) {
  const [toggleCheckBox, setToggleCheckBox] = useState(item.isCompleted);

  // let time = moment().calendar();
  return (
    <View style={styles.todo_list_container}>
      {/* to complete the list */}
      <View style={styles.todo_list_inner}>
        <CheckBox
          disabled={false}
          value={toggleCheckBox}
          onValueChange={() => setToggleCheckBox(!toggleCheckBox)}
        />

        {/* todo item */}
        <Text
          style={[toggleCheckBox ? styles.todoItemAdd : styles.todoItemStyle]}
        >
          {item.text}
        </Text>

        {/* delete the todo item */}
        <FontAwesome
          name="trash-o"
          style={styles.trash}
          onPress={() => deleteItem(item.id)}
        />
      </View>
    </View>
  );
}

// styles
const styles = StyleSheet.create({
  todo_list_container: {
    backgroundColor: "#373737",
    paddingVertical: 25,
    paddingLeft: 15,
    marginBottom: 25,
    marginHorizontal: 15,
    borderWidth: 1,
    borderColor: "#312F2F",
    borderRadius: 8,
  },

  todo_list_inner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },

  todoItemStyle: {
    fontSize: 16,
    paddingLeft: 8,
    color: "#fff",
  },

  todoItemAdd: {
    textDecorationLine: "line-through",
    color: "#C6A569",
  },

  checkBox: {
    borderWidth: 2,
  },

  trash: {
    fontSize: 25,
    color: "#C6A569",
    position: "absolute",
    right: 25,
  },
});

NavigationBar.js

import { View, StyleSheet } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  createAppContainer,
  NavigationContainer,
  DefaultTheme,
} from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import TodoApp from "../TodoComponents/TodoApp";
import Completed from "../TodoComponents/Completed";
import Incompleted from "../TodoComponents/Incompleted";

// for creating the botton navigation
const Tab = createBottomTabNavigator();

// For changing the theme
const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: "#2D2D2D",
  },
};

export default function NavigationBar() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === "All") {
              iconName = focused ? "folder-open" : "folder-open-outline";
            } else if (route.name === "Completed") {
              iconName = focused
                ? "clipboard-check"
                : "clipboard-check-outline";
            } else if (route.name === "Incompleted") {
              iconName = focused ? "clipboard-text" : "clipboard-text-outline";
            }

            // You can return any component that you like here!
            return (
              <MaterialCommunityIcons
                name={iconName}
                size={size}
                color={color}
              />
            );
          },
        })}
        tabBarOptions={{
          activeTintColor: "#C6A569",
          inactiveTintColor: "gray",
        }}
      >
        <Tab.Screen name="All" component={TodoApp} />
        <Tab.Screen name="Completed" component={Completed} />
        <Tab.Screen name="Incompleted" component={Incompleted} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Completed.js

import { Text, View, StyleSheet } from "react-native";
import TodoApp from "./TodoApp";
export default function Completed() {
  return <View></View>;
}

// styles
const styles = StyleSheet.create({
  main_container: {
    width: "100%",
    backgroundColor: "#2D2D2D",
  },
});

Incompleted.js

import { Text, View, StyleSheet } from "react-native";
export default function Inompleted() {
  return (
    <View style={styles.main_container}>
      <Text> Incompleted Tasks</Text>
    </View>
  );
}

// styles
const styles = StyleSheet.create({
  main_container: {
    width: "100%",
    backgroundColor: "#2D2D2D",
  },
});

PS ，请不要使用按钮链接示例，因为我正在使用标签导航。 谢谢