Through ToDo's small project practice, we can review the page layout, event monitoring, and the use of hook functions in React Native.
Overall project framework construction and related basic styles
First, we first complete the overall framework of the project and define the relevant elements and style class names in the page. And indicate the location of the corresponding separate component. Specific examples are as follows:
<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,
},
});
Write header components
The header component of the task list only displays the title, so it is relatively simple when writing code.
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",
},
});
After writing the head component, we only need to introduce it in the core component.
Write task components
When building the overall project, we write the tasks on the root-level elements, so our code may be more troublesome to maintain, so we need to maintain the task items as a sub-component. The specific code is as follows:
// 删除任务项
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,
},
});
Write form components
The last step is to add the task. The specific code is as follows:
// 添加任务项
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",
},
});
Hide the keyboard after clicking on any area
Now our software keyboard will not retract by itself. We can achieve the effect that the software keyboard will automatically retract when the user clicks on any area. The specific example code is as follows:
<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>