با React Native یک وبلاگ قابل جستجوی پویا بسازید

Summarize this content to 400 words in Persian Lang
در این مقاله، نحوه ساخت یک برنامه React Native را بررسی خواهیم کرد که داده‌ها را از یک API واکشی می‌کند، آن را نمایش می‌دهد و شامل یک عملکرد جستجو برای فیلتر کردن پست‌ها بدون زحمت است.

بیایید وارد کد شویم و جادوی ایجاد یک وبلاگ قابل جستجو با استفاده از React Native را کشف کنیم.

راه اندازی پروژه

قبل از شروع، مطمئن شوید که یک محیط React Native را تنظیم کرده اید. برای شروع می توانید مستندات رسمی React Native را دنبال کنید.

npx @react-native-community/cli@latest init MyBlogApp
cd MyBlogApp

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وابستگی های لازم را نصب کنید

npm install

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ساخت مؤلفه پست ها

هسته برنامه ما این است Posts جزء. این جزء واکشی پست‌ها، نمایش آن‌ها و ارائه قابلیت جستجو برای فیلتر کردن پست‌ها را انجام می‌دهد.

ابتدا، اجزای رابط کاربری را ایجاد می‌کنم: یک دکمه «بارگذاری پست‌ها»، یک ورودی متن برای فیلتر کردن پست‌ها و یک FlatList برای نمایش لیست پست‌ها.

import React, { useState } from “react”;
import {
Text,
View,
Pressable,
FlatList,
TextInput,
StyleSheet,
} from “react-native”;
import Post from “./Post”;

const Posts = () => {
const [posts, setPosts] = useState([]);
const [filteredPosts, setFilteredPosts] = useState([]);
const [loaded, setLoaded] = useState(false);
const [searchText, setSearchText] = useState(“”);
const url = “https://jsonplaceholder.typicode.com/posts”;

return (
View style={styles.mainContainer}>
{!loaded ? (
Pressable
style={styles.loadBtn}
onPress={() => {}}
>
Text>Load Posts/Text>
/Pressable>
) : (
View>
View style={styles.searchContainer}>
Text>Search: /Text>
TextInput
style={styles.searchField}
value={searchText}
onChangeText={() => {}}
/>
/View>
FlatList
data={filteredPosts}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => Post post={item} />}
ListEmptyComponent={Text>No posts found./Text>}
contentContainerStyle={styles.postsContainer}
/>
/View>
)}
/View>
);
};

const styles = StyleSheet.create({
mainContainer: { flex: 1, padding: 30 },
loadBtn: {
borderWidth: 1,
padding: 10,
alignItems: “center”,
borderRadius: 5,
backgroundColor: “#f0f0f0”,
},
searchContainer: {
flexDirection: “row”,
alignItems: “center”,
alignSelf: “center”,
marginBottom: 20,
},
searchField: {
borderWidth: 1,
height: 40,
width: 200,
borderRadius: 5,
paddingHorizontal: 10,
},
postsContainer: { paddingHorizontal: 20, paddingVertical: 10 },
});

export default Posts;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دریافت پست ها از API

اکنون، اجازه دهید یک تابع برای دریافت پست ها از API خارجی بنویسیم.

const getPosts = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setPosts(result);
setFilteredPosts(result);
setLoaded(true);
} catch (error) {
console.error(“Failed to fetch posts:”, error);
}
};

…
Pressable
style={styles.loadBtn}
testID=”load-posts”
onPress={getPosts}
>
Text>Load Posts/Text>
/Pressable>
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

منطق فیلتراسیون را بنویسید

در اینجا، من عنوان و متن پست را برای متن جستجو شده بررسی می کنم و پست های نمایش داده شده را بر اساس آن به روز می کنم.

const filterPosts = (text) => {
setSearchText(text);
if (text) {
const lowercasedText = text.toLowerCase();
const updatedPosts = posts.filter(
(post) =>
post.title.toLowerCase().includes(lowercasedText) ||
post.body.toLowerCase().includes(lowercasedText)
);
setFilteredPosts(updatedPosts);
} else {
setFilteredPosts(posts);
}
};

…
TextInput
…
onChangeText={filterPosts}
/>
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

درک کد

مدیریت دولتی: ما از React استفاده می کنیم useState برای مدیریت وضعیت پست ها، پست های فیلتر شده، وضعیت بارگیری و جستجوی متن.

واکشی داده ها: را getPosts تابع داده ها را از JSONPlaceholder API واکشی می کند و وضعیت پست ها را به روز می کند.

فیلتر کردن پست ها: را filterPosts تابع پست ها را بر اساس متن جستجو فیلتر می کند. اگر متن جستجو با قسمتی از عنوان یا متن پست مطابقت داشته باشد، آن پست را در لیست فیلتر شده قرار می دهد.

رندر کردن پست ها: بسته به اینکه متن جستجو وجود داشته باشد، لیست کامل پست ها یا لیست فیلتر شده را نمایش می دهیم.

ایجاد کامپوننت پست

ایجاد یک Post جزء برای نمایش پست های جداگانه

import React from “react”;
import { View, Text, StyleSheet } from “react-native”;

const Post = ({ post }) => {
return (
View style={styles.postContainer}>
Text style={styles.postTitle}>{post.title}/Text>
Text>{post.body}/Text>
/View>
);
};

const styles = StyleSheet.create({
postContainer: { padding: 10, borderBottomWidth: 1, borderColor: “#ddd” },
postTitle: { fontSize: 18, fontWeight: “bold” }
});

export default Post;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجرای برنامه

برای اجرای برنامه React Native از دستور زیر استفاده کنید

npx react-native run-android
# or
npx react-native run-ios

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نسخه ی نمایشی

npx @react-native-community/cli@latest init MyBlogApp
cd MyBlogApp

npm install

import React, { useState } from "react";
import {
  Text,
  View,
  Pressable,
  FlatList,
  TextInput,
  StyleSheet,
} from "react-native";
import Post from "./Post";

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const [filteredPosts, setFilteredPosts] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [searchText, setSearchText] = useState("");
  const url = "https://jsonplaceholder.typicode.com/posts";

  return (
    View style={styles.mainContainer}>
      {!loaded ? (
        Pressable
          style={styles.loadBtn}
          onPress={() => {}}
        >
          Text>Load Posts/Text>
        /Pressable>
      ) : (
        View>
          View style={styles.searchContainer}>
            Text>Search: /Text>
            TextInput
              style={styles.searchField}
              value={searchText}
              onChangeText={() => {}}
            />
          /View>
          FlatList
            data={filteredPosts}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => Post post={item} />}
            ListEmptyComponent={Text>No posts found./Text>}
            contentContainerStyle={styles.postsContainer}
          />
        /View>
      )}
    /View>
  );
};

const styles = StyleSheet.create({
  mainContainer: { flex: 1, padding: 30 },
  loadBtn: {
    borderWidth: 1,
    padding: 10,
    alignItems: "center",
    borderRadius: 5,
    backgroundColor: "#f0f0f0",
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "center",
    marginBottom: 20,
  },
  searchField: {
    borderWidth: 1,
    height: 40,
    width: 200,
    borderRadius: 5,
    paddingHorizontal: 10,
  },
  postsContainer: { paddingHorizontal: 20, paddingVertical: 10 },
});

export default Posts;

  const getPosts = async () => {
    try {
      const response = await fetch(url);
      const result = await response.json();
      setPosts(result);
      setFilteredPosts(result);
      setLoaded(true);
    } catch (error) {
      console.error("Failed to fetch posts:", error);
    }
  };

...
  Pressable
    style={styles.loadBtn}
    testID="load-posts"
    onPress={getPosts}
  >
    Text>Load Posts/Text>
  /Pressable>
...

  const filterPosts = (text) => {
    setSearchText(text);
    if (text) {
      const lowercasedText = text.toLowerCase();
      const updatedPosts = posts.filter(
        (post) =>
          post.title.toLowerCase().includes(lowercasedText) ||
          post.body.toLowerCase().includes(lowercasedText)
      );
      setFilteredPosts(updatedPosts);
    } else {
      setFilteredPosts(posts);
    }
  };

...
TextInput 
  ...
  onChangeText={filterPosts}
/>
...

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const Post = ({ post }) => {
  return (
    View style={styles.postContainer}>
      Text style={styles.postTitle}>{post.title}/Text>
      Text>{post.body}/Text>
    /View>
  );
};

const styles = StyleSheet.create({
  postContainer: { padding: 10, borderBottomWidth: 1, borderColor: "#ddd" },
  postTitle: { fontSize: 18, fontWeight: "bold" }
});

export default Post;

npx react-native run-android
# or
npx react-native run-ios