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

分类：编程问答

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

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

这是我的代码： 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",{ text: "go for walk",id: "3",]);

  // 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,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,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,borderColor: "#312F2F",borderRadius: 8,todo_list_inner: {
    flex: 1,todoItemStyle: {
    fontSize: 16,paddingLeft: 8,todoItemAdd: {
    textDecorationLine: "line-through",checkBox: {
    borderWidth: 2,trash: {
    fontSize: 25,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,StyleSheet } from "react-native";
import TodoApp from "./TodoApp";
export default function Completed() {
  return <View></View>;
}

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

Incompleted.js 

import { Text,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%",});

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot