React Native 任务列表实战

这篇具有很好参考价值的文章主要介绍了React Native 任务列表实战。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过 ToDo 的小项目实战,我们可以回顾页面布局,事件的监听,React Native 中的钩子函数使用。

整体项目框架搭建以及相关基础样式

首先我们先完成项目的整体框架搭建,把页面中相关的元素和样式类名定义好。并且表明对应单独组建的位置,具体的实例如下:

<View style={styles.container}>
  {/* 后续补充头部组建 */}

  <View style={styles.content}>
    {/* 后续补充表单组建 */}

    <View style={styles.list}>
      <FlatList
        data={todo}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    </View>
  </View>
</View>
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 40,
  },
  list: {
    marginTop: 20,
  },
});

编写头部组件

任务列表的头部组建只是展示标题,所以在编写代码的时候比较简单

export default function header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>我的任务列表</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 50,
    backgroundColor: "coral",
    justifyContent: "center",
  },
  title: {
    textAlign: "center",
    color: "#FFFFFF",
    fontSize: 20,
    fontWeight: "bold",
  },
});

编写完成头部组建后,只要我们在最核心的组件中引入就可以。

编写任务组件

在整体项目搭建的时候,我们是把任务编写在根级元素上,这样我们的代码可能在维护上会比较麻烦,所以我们需要把任务项作为一个子组件来维护。具体代码如下:

// 删除任务项
const pressHandler = (id: number) => {
  setTodo((prevTodos: ToDoIem[]) => prevTodos.filter((item) => item.id !== id));
};
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import React from "react";

interface ToDoIem {
  title: string;
  id: number;
}

export default function todoItem(props: {
  item: ToDoIem;
  pressHandler: Function;
}) {
  return (
    <TouchableOpacity onPress={() => props.pressHandler(props.item.id)}>
      <Text style={styles.item}>{props.item.title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    marginTop: 16,
    borderColor: "#bbb",
    borderWidth: 1,
    borderStyle: "dashed",
    borderRadius: 10,
  },
});

编写表单组件

最后一步就是实现任务的添加,具体的代码如下:

// 添加任务项
const submitHandler = (val: string) => {
  // 判断任务标题的长度
  if (val.length > 3) {
    setTodo((prevTodos: ToDoIem[]) => {
      return [{ title: val, id: prevTodos.length + 1 }, ...prevTodos];
    });
  } else {
    Alert.alert("信息提示", "任务名称长度必须大于3个字符", [
      { text: "关闭", onPress: () => {} },
    ]);
  }
};
export default function addToDo(props: { submitHandler: Function }) {
  const [text, setText] = useState<string>("");

  const changeHandler = (val: string) => {
    setText(val);
  };

  return (
    <View>
      <TextInput
        style={styles.input}
        value={text}
        placeholder="添加任务..."
        onChangeText={(val) => changeHandler(val)}
      />
      <Button
        onPress={() => {
          props.submitHandler(text);
          setText("");
          Keyboard.dismiss();
        }}
        title="添加任务"
        color="coral"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    marginBottom: 10,
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderBottomWidth: 1,
    borderBottomColor: "#DDDDDD",
  },
});

点击任何区域后收起键盘

现在我们的软件键盘是不会自己收起的,我们可以实现用户点击任何区域,软件键盘就会自动收起的效果,具体实例代码如下:

<TouchableWithoutFeedback
  onPress={() => {
    Keyboard.dismiss(); // 关闭键盘
  }}
>
  <View style={styles.container}>
    <Header />

    <View style={styles.content}>
      <AddToDo submitHandler={submitHandler} />

      <View style={styles.list}>
        <FlatList
          data={todo}
          renderItem={({ item }) => (
            <TodoItem item={item} pressHandler={pressHandler} />
          )}
        />
      </View>
    </View>
  </View>
</TouchableWithoutFeedback>

完整代码

完整代码下载文章来源地址https://www.toymoban.com/news/detail-660835.html

到了这里,关于React Native 任务列表实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 创建react native项目的笔记

    本项目适用于react native@0.72 react@18.2 添加 npm install react-native-gesture-handler ##接入第三支付 https://open.weixin.qq.com/

    2024年02月12日
    浏览(46)
  • ReactNative项目构建分析与思考之native_modules.gradle

    上一篇文章分析完 react-native-gradle-plugin 后,我们知道了react-native-gradle-plugin 主要是对依赖环境,以及RN的依赖版本进行管理。 本篇文章来接着分析 native_modules.gradle 这个脚本,这个脚本是React Native构建中比较重要的一个角色。 这是一个源码形式的脚本文件,虽然只有一个文件

    2024年03月20日
    浏览(41)
  • 探索React Native认证实战示例项目:打造安全的移动应用体验

    项目地址:https://gitcode.com/hezhii/react-native-auth-example 在移动开发领域,React Native以其跨平台和高效性能而备受青睐。如果你正在寻找一个直观的、基于React Native的身份验证实现示例,那么这个项目—— react-native-auth-example ,将会是你的理想之选。 react-native-auth-example 是一个简单

    2024年04月27日
    浏览(42)
  • react入门到实战 学习笔记1 搭建

           一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架 React有什么特点 1- 声明式UI(JSX) 写UI就和写普通的HTML一样,抛弃命令式的繁琐实现  2- 组件化 组件是react中最重要的内容,组件可以通过搭积木的方式拼成一个完整的页面,通过组件的抽象可以

    2024年02月13日
    浏览(34)
  • 【React Native】学习记录(一)——环境搭建

    Expo是一套工具,库和服务,可让您通过编写JavaScript来构建原生iOS和Android应用程序。 一开始学习的时候直接使用的是expo。 接下来需要搭建安卓和IOS端(为此特意换成了苹果电脑),主要参考的是 这里。 先说说比较容易大家的苹果系统:(在此之前记得先安装node) 可以通过

    2024年02月15日
    浏览(35)
  • 【学习笔记】Python核心技术与实战-基础篇-03列表和元组,到底用哪个?

    列表和元组,都是一个可以放置任意数据类型的有序集合。 在绝大多数编程语言中,集合的数据类型必须一致。不过,对于 Python 的列表和元组来 说,并无此要求: 列表是动态的,长度大小不固定,可以随意地增加、删减或者改变元素(mutable)。 而元组是静态的,长度大小

    2024年02月08日
    浏览(48)
  • 【React Native】学习记录(二)——路由搭建和常见的开发技巧

    在开发过程中发现,两个模拟器都不能输入中文,所以需要配置一下。 先说一下安卓,在弹出的输入框中查看设置,设置一下对应的 languages 即可: 在苹果模拟器中,跟苹果手机一样,打开设置,然后打开通用,同样设置语言: 我在这里走了弯路,去了另一个库…,路由文

    2024年02月15日
    浏览(47)
  • React-Native学习,RN的容器Flex-Box布局

    justify-content(在RN中属性名称为:justifyContent)在主轴上对齐方式 align-items(在RN中属性名称为:alignItems)在交叉轴上的对齐方式 在React Native中,当没有设置容器的主轴方向时,默认容器主轴方向为:flexDrection: \\\'column\\\',也就是说,当我们的容器的主轴的排布方向为竖直方向时

    2024年02月16日
    浏览(54)
  • 推荐用于学习RN原生模块开发的开源库—react-native-ble-manager

    如题RN的原生模块/Native Modules的开发是一项很重要的技能,但RN官网的示例又比较简单,然后最近我接触与使用、还有阅读了react-native-ble-manager的部份源码,发现里边完全包含了一个Native Modules所涉及的知识点/技术点,故特推荐给大家,共同学习与交流 react-native-ble-manager目前

    2024年02月15日
    浏览(51)
  • 【实战】 React 与 Hook 应用:实现项目列表 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月09日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包