রিয়েক্ট নেটিভ এবং নেটিভ বেস দিয়ে একটি শক্তিশালী অ্যান্ড্রয়েড নিউজ অ্যাপ তৈরি করুন

আমরা একটি такой dünyায় বাস করি যেখানে সব কিছু تغير হতে থাকে। তাই আপনি যদি বর্তমান ঘটনাগুলোর সাথে আপডেট থাকতে চান, তবে একটি ভালো নিউজ অ্যাপ আপনার জন্য অপরিহার্য।

আপনাকে কিছু সুন্দর টেকনোলজি শিখতে সাহায্য করার জন্য এবং আপডেট থাকতে, এই ব্লগ পোস্টে আমরা রিয়েক্ট নেটিভ ব্যবহার করে অ্যান্ড্রয়েডের জন্য একটি নিউজ অ্যাপ্লিকেশন তৈরি করব। এটি বিভিন্ন নিউজ চ্যানেল থেকে হেডলাইন আনবে এবং সেগুলো ক্যাটাগরি অনুযায়ী দেখাবে।

সম্পূর্ণ হলে আমাদের অ্যাপটি এরকম দেখাবে। তাহলে সরাসরি কাজ শুরু করা যাক।

এক্সপো (Expo) ইনস্টল করার পদ্ধতি

এক্সপো কী? এক্সপো হল একটি ফ্রেমওয়ার্ক যা রিয়েক্ট নেটিভ অ্যাপ দ্রুত এবং সহজে তৈরি ও ডিপ্লয় করতে সাহায্য করে।

আসুন এটি ইনস্টল করি।

npm install --global expo-cli

এই কমান্ডটি আপনার টার্মিনালে চালান যাতে এক্সপো সিএলআই ইনস্টল হয়। এখানে --global ব্যবহার করা হয়েছে যাতে এটি সব জায়গায় ইনস্টল হয়।

ইনস্টলেশন সম্পন্ন হলে, আমাদের একটি এক্সপো প্রজেক্ট তৈরি করতে হবে।

expo init News-Application

উপরোক্ত কমান্ডটি ব্যবহার করে প্রজেক্টটি আরম্ভ করুন। এটি আপনার অ্যাপ্লিকেশনের নাম, টাইপস্ক্রিপ্ট যোগ করতে চান কিনা, বা ব্ল্যাঙ্ক প্রজেক্ট দিয়ে শুরু করতে চান কিনা সেটা জিজ্ঞাসা করবে। শুধু ব্ল্যাঙ্ক সিলেক্ট করে এন্টার চাপুন।

তারপর এটি ফোল্ডারে সমস্ত প্যাকেজ এবং ডিপেনডেন্সি ডাউনলোড করবে।

এখন তা হয়ে গেলে, প্রজেক্ট ফোল্ডারে নেভিগেট করুন। অ্যাপ্লিকেশন শুরু করতে expo start লিখুন। এটি ব্রাউজারে ডেভেলপার টুলস খুলবে।

বাম পাশে অনেক অপশন দেখবেন, যেমন অ্যান্ড্রয়েড ডিভাইস/এমুলেটরে রান করা, বা iOS সিমুলেটরে। আমরা ওয়েব ব্রাউজারে অ্যাপ্লিকেশন চালাব, তাই Run in Web Browser অপশনে ক্লিক করুন।

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); 

এটি আমাদের App.js ফাইল, যেটিতে ডিফল্ট বয়লারপ্লেট কোড রয়েছে।

এখন আমাদের অ্যাপ্লিকেশন চলছে।

রিয়েক্ট নেভিগেশন ব্যবহার করে বিভিন্ন স্ক্রিন তৈরি করা

এখন, আমাদের অ্যাপ্লিকেশনের জন্য বিভিন্ন স্ক্রিন তৈরি করব। এর জন্য আমরা রিয়েক্ট নেভিগেশন ব্যবহার করব। তাহলে এটি ইনস্টল করি।

https://reactnavigation.org/ এ যান এবং Read Docs-এ ক্লিক করুন। এটি ডকুমেন্টেশন পেজ খুলবে।

নিচের কমান্ড ব্যবহার করে রিয়েক্ট নেভিগেশন ইনস্টল করুন:

npm install @react-navigation/native expo install react-native-screens react-native-safe-area-context

এখন আমাদের রিয়েক্ট নেভিগেশন ইনস্টল হয়ে গেছে।

আমরা bottomTabNavigator ব্যবহার করব। তাই বাম মেনু থেকে API Reference, তারপর Navigators, তারপর Bottom Tabs বেছে নিন।

নিচের কমান্ড দিয়ে বটম ট্যাবস ইনস্টল করুন:

npm install @react-navigation/bottom-tabs

এখন, আমাদের App.js ফাইলে বটম ট্যাবস ইম্পোর্ট করতে হবে যাতে এটি ব্যবহার করা যায়।

এভাবে ইম্পোর্ট করুন:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 

এখন ট্যাব স্ক্রিনগুলো ইম্পোর্ট করি।

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> ); }

এভাবে আমরা বটম ট্যাবস তৈরি করি।

আমাদের কেসে আমাদের এরকম কিছু করতে হবে:

<Tab.Navigator> <Tab.Screen name="All" component={All} /> <Tab.Screen name="Business" component={Business} /> <Tab.Screen name="Health" component={HealthScreen} /> <Tab.Screen name="Sports" component={SportsScreen} /> <Tab.Screen name="Tech" component={TechScreen} /> </Tab.Navigator>

আমাদের নিচের ট্যাবের জন্য এই স্ক্রিনগুলো তৈরি করতে হবে: All News, Business News, Sports News, Health News, এবং Tech News। প্রজেক্টে প্রতিটি স্ক্রিনের জন্য একটি কম্পোনেন্ট তৈরি করুন।

এই TabNavigator কে একটি NavigationContainer দিয়ে র‍্যাপ করতে হবে:

<NavigationContainer> <Tab.Navigator> <Tab.Screen name="All" component={All} /> <Tab.Screen name="Business" component={Business} /> <Tab.Screen name="Health" component={HealthScreen} /> <Tab.Screen name="Sports" component={SportsScreen} /> <Tab.Screen name="Tech" component={TechScreen} /> </Tab.Navigator> </NavigationContainer>

এছাড়াও এই সব কম্পোনেন্ট ইম্পোর্ট করতে হবে, তাই শীর্ষে ইম্পোর্ট করুন।

import All from './screens/All'; import Business from './screens/Business'; import HealthScreen from './screens/Health'; import SportsScreen from './screens/Sports'; import TechScreen from './screens/Tech';

এখন আমরা যা যা লিখেছি সেগুলো একসাথে রাখলে নিচের কোডটি পাওয়া যাবে:

import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import All from './screens/All'; import Business from './screens/Business'; import HealthScreen from './screens/Health'; import SportsScreen from './screens/Sports'; import TechScreen from './screens/Tech'; const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="All" component={All} /> <Tab.Screen name="Business" component={Business} /> <Tab.Screen name="Health" component={HealthScreen} /> <Tab.Screen name="Sports" component={SportsScreen} /> <Tab.Screen name="Tech" component={TechScreen} /> </Tab.Navigator> </NavigationContainer> ); } 

এবং এটি হবে আমাদের আউটপুট:

এখানে All, Business, Health, Sports এবং Tech-এর জন্য পাঁচটি স্ক্রিন রয়েছে।

এখন এখানে কিছু সমायোজন করব। বটম ট্যাবের আইকনগুলো পরিবর্তন করতে হবে।

उस জন্য আমাদের একটি আইকন লাইব্রেরি দরকার। সেজন্য আমরা react-native-elements ব্যবহার করব।

ইনস্টল করতে নিচের কমান্ড টাইপ করুন:

npm install react-native-elements

এই আইকন প্যাকেজে বেছে নেওয়ার জন্য অনেক আইকন অপশন রয়েছে।

এখন বটম ট্যাব নেভিগেটরে আমাদের আইকন যোগ করি।

<Tab.Screen name="All" component={All} options={{ tabBarIcon: (props) => ( <Icon type='feather' name='home' color={props.color} /> ), }} />

এখানে হোম পেজের জন্য "home" নামের আইকন এবং ফेदার আইকন ক্লাস টাইপ হিসেবে যোগ করা হয়েছে।

এটি উপরের আউটপুট দেবে। এবং একই প্রক্রিয়া সব গুলোর জন্য পুনরাবৃত্তি করুন।

<Tab.Navigator> <Tab.Screen name="All" component={All} options={{ tabBarIcon: (props) => ( <Icon type='feather' name='home' color={props.color} /> ), }} /> <Tab.Screen name="Business" component={Business} options={{ tabBarIcon: (props) => ( <Icon type='feather' name='dollar-sign' color={props.color} /> ), }} /> <Tab.Screen name="Health" component={HealthScreen} options={{ tabBarIcon: (props) => ( <Icon type='feather' name='heart' color={props.color} /> ), }} /> <Tab.Screen name="Sports" component={SportsScreen} options={{ tabBarIcon: (props) => ( <Icon type='ionicon' name="tennisball-outline" color={props.color} /> ), }} /> <Tab.Screen name="Tech" component={TechScreen} options={{ tabBarIcon: (props) => ( <Icon type='ionicon' name="hardware-chip-outline" color={props.color} /> ), }} /> </Tab.Navigator>

এখন আমাদের প্রতিটি আলাদা ট্যাব বা স্ক্রিন সম্পন্ন, এবং প্রতিটির নিজস্ব স্বতন্ত্র আইকন আছে।

নিউজ API কল করার পদ্ধতি

এখন, https://newsapi.org/ থেকে নিউজ API কল করব।

এই ওয়েবসাইটে যান এবং সাইন আপ করুন। এটি আপনাকে একটি API কী দেবে।

সমস্ত নিউজ কনস্ট্যান্ট সংরক্ষণ করার জন্য একটি কনফিগ ফাইল দরকার, তাই তা তৈরি করি।

export const API_KEY = ``; export const endpoint = `https://newsapi.org/v2/top-headlines`; export const country = 'in'

আমাদের API_KEY, endpoint, এবং কান্ট্রি কোড দরকার।

এখন, আমাদের GET API রিকোয়েস্ট এর জন্য একটি সার্ভিস তৈরি করব।

services.js নামের একটি ফাইল তৈরি করুন।

শীর্ষে API_KEY, endpoint, এবং country ইম্পোর্ট করুন।

import { API_KEY, endpoint, country } from '../config/config';

তারপর সার্ভিসের বডি লিখুন।

export async function services(category = 'general') { let articles = await fetch(`${endpoint}?country=${country}&category=${category}`, { headers: { 'X-API-KEY': API_KEY } }); let result = await articles.json(); articles = null; return result.articles; }

এখানে আমরা এন্ডপয়েন্ট ব্যবহার করে, কান্ট্রি এবং ক্যাটাগরি যুক্ত করে নিউজ ডেটা ফেচ করছি। ফাংশনে ডিফল্ট ক্যাটাগরি হিসেবে general পাস করা হয়েছে। হেডারে API_KEYও পাস করা হয়েছে।

তারপর রেসপন্স বাkommেন ডেটা JSON ফরম্যাটে কনভার্ট করে result ভেরিয়েবলে সংরক্ষণ করা হয়েছে।

অবশেষে return কীওয়ার্ড ব্যবহার করে এটি রিটার্ন করা হয়েছে।

সम्पূর্ণ ফাইল আপনার রেফারেন্সের জন্য:

import { API_KEY, endpoint, country } from '../config/config'; export async function services(category = 'general') { let articles = await fetch(`${endpoint}?country=${country}&category=${category}`, { headers: { 'X-API-KEY': API_KEY } }); let result = await articles.json(); articles = null; return result.articles; }

এখন এই সার্ভিসটি আমাদের All.js ফাইলে ইম্পোর্ট করতে হবে।

import { services } from '../services/services';

আমাদের useState এবং useEffect হুক ব্যবহার করতে হবে। useEffect হুক All.js ফাইলে এই সার্ভিসটি কল করবে এবং useState API থেকে আসা রেসপন্স সংরক্ষণ করার জন্য একটি স্টেট তৈরি করবে।

import React, { useEffect, useState } from 'react' import { View } from 'react-native'; import { services } from '../services/services'; export default function All() { const [newsData, setNewsData] = useState([]) useEffect(() => { services('general') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, []) return ( <View> </View> ) } 

এই ফাইলে, আমরা useEffect হুকে সার্ভিস কল করি। তারপর রেসপন্সটি newsData স্টেটে সংরক্ষণ করি, যা একটি অ্যারে। আমরা ক্যাটাগরির জন্য general প্যারামিটার পাস করি।

এই স্ক্রিন সব নিউজ ফেচ করবে, তাই general ক্যাটাগরি ব্যবহার করা হয়েছে। অন্য স্ক্রিনের জন্য এটি পরিবর্তন হবে: Health স্ক্রিনের জন্য health, Sports-এর জন্য sports, ইত্যাদি।

এখন এই ডেটা আমাদের ইন্টারফেসে দেখাতে হবে। उसके জন্য আমাদের আরেকটি প্যাকেজ দরকার যেটির নাম Native Base। তাহলে এটি ইনস্টল করি।

নিচের কমান্ডগুলো টাইপ করে নেটিভ বেস ইনস্টল করুন:

yarn add native-base styled-components styled-system expo install react-native-svg react-native-safe-area-context

All.js-এ, নেটিভ বেস থেকে কিছু জিনিস ইম্পোর্ট করি:

import React, { useEffect, useState } from 'react' import { View, Text } from 'react-native'; import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base'; import { services } from '../services/services';

তারপর রিটার্নে NativeBaseProvider যোগ করুন।

return ( <NativeBaseProvider> </NativeBaseProvider> )

তারপর ScrollView যোগ করুন। এটি ব্যবহারকারীকে স্ক্রোল করার সুবিধা দেবে যদি নিউজ ডেটা স্ক্রিনের হাইটের বাইরে চলে যায়।

<NativeBaseProvider> <ScrollView height={850}> </ScrollView> </NativeBaseProvider>

এখন নিউজ ডেটা দেখানোর জন্য FlatList যোগ করুন।

<NativeBaseProvider> <ScrollView height={850}> <FlatList data={newsData} renderItem={({ item }) => ( <View> </View> )} keyExtractor={(item) => item.id} /> </ScrollView> </NativeBaseProvider>

FlatList একটি data prop নেয়, যা আমাদের পূর্বে তৈরি করা newsData স্টেট, এবং renderItem থেকে একটি item রিটার্ন করে।

এটি জাভাস্ক্রিপ্টের map-এর মতো, যা একটি অ্যারে ট্রাভার্স করে একটি আইটেম রিটার্ন করে। এতে একটি keyExtractorও থাকে যা প্রতিটি আইটেমকে ইউনিক बनाने کے लिए ব্যবহৃত হয়।

এখন ভিউতে ডেটা দেখান।

প্যারেন্ট ভিউর ভিতরে একটি চাইল্ড ভিউ তৈরি করুন:

<NativeBaseProvider> <ScrollView height={850}> <FlatList data={newsData} renderItem={({ item }) => ( <View> <View> </View> </View> )} keyExtractor={(item) => item.id} /> </ScrollView> </NativeBaseProvider>

এখন চাইল্ড ভিউতে কিছু টেক্সট যোগ করুন।

<NativeBaseProvider> <ScrollView height={850}> <FlatList data={newsData} renderItem={({ item }) => ( <View> <View> <Text> {item.title} </Text> <Text> {item.publishedAt} </Text> <Text> {item.description} </Text> </View> </View> )} keyExtractor={(item) => item.id} /> </ScrollView> </NativeBaseProvider>

এতে আমাদের নিউজ হেডলাইন タイトル, বিবরণ, এবং প্রকাশনার তারিখ রয়েছে।

রিয়েক্ট নেটিভ নিউজ অ্যাপ স্টাইল করার পদ্ধতি

এখন আমাদের অ্যাপটি নিউজ টাইটল, বিবরণ, এবং তারিখের সাথে এরকম দেখাচ্ছে। এটাকে কিছুটা সুন্দর করতে কিছু স্টাইলিং দরকার।

রিয়েক্ট নেটিভ থেকে StyleSheet ইম্পোর্ট করুন スタイলিং ব্যবহার করার জন্য।

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

<View> <View style={styles.newsContainer}> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {item.publishedAt} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> </View>

তারপর নিচের মত স্টাইল যোগ করুন। এবং নিচে সেই স্টাইলগুলো তৈরি করুন।

const styles = StyleSheet.create({ newsContainer: { padding: 10 }, title: { fontSize: 18, marginTop: 10, fontWeight: "600" }, newsDescription: { fontSize: 16, marginTop: 10 }, date: { fontSize: 14 }, });

স্টাইলিং পাওয়ার পর অ্যাপটি এখন এরকম দেখাচ্ছে। আপনি পেজ নিচে স্ক্রোলও করতে পারেন।

এখন ডেট ফরম্যাট পরিবর্তন করে মানব পঠনযোগ্য ফরম্যাটে আনা দরকার, কারণ '2021-08-21T11:00:40Z' বুঝতে পারছি না।

उस জন্য moment.js প্যাকেজ ব্যবহার করব, তাই নিচের কমান্ড দিয়ে ইনস্টল করুন:

npm install moment --save

তারপর All.js স্ক্রিনে এটি ইম্পোর্ট করুন:

<Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text>

ডেটটি এইভাবে ফরম্যাট করুন:

Moment ডকুমেন্টেশনে অনেক ফরম্যাট দেওয়া আছে। আমি 'LLL' ফরম্যাটটি বেছে নিলাম।

এখন আমাদের ডেটাগুলো অনেক বেশি মানব পঠনযোগ্য হয়ে গেছে।

নিউজ আর্টিকেলগুলো একে অপর থেকে আলাদা করার জন্য একটি ডিভাইডারও দরকার যাতে সেগুলো একসাথে না মিশে যায়।

<View> <View style={styles.newsContainer}> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> <Divider my={2} bg="#e0e0e0" /> </View>

চাইল্ড ভিউর পর ডিভাইডার যোগ করার পর আমাদের অ্যাপটি এরকম দেখাচ্ছে:

এখন আমাদের নিউজ হেডলাইনগুলো ভাগ হয়ে গেছে যা খুব ভালো দেখাচ্ছে।

এই নিউজ API-তে ইমেজও থাকে। তাহলে সেটাও যোগ করি।

<View> <View style={styles.newsContainer}> <Image width={550} height={250} resizeMode={"cover"} source={{ uri: item.urlToImage, }} alt="Alternate Text" /> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> <Divider my={2} bg="#e0e0e0" /> </View>

এখানে আমরা ইমেজ যোগ করেছি এবং urlToImage কী ব্যবহার করে এটি করেছি।

এখন নিউজ ইমেজগুলো দেখাচ্ছে।

নিউজ লোডিং দেখানোর জন্য স্পিনার যোগ করা

একটি স্পিনার যোগ করব যা নিউজ লোড হয়ার সময় দেখাবে।

প্রথমে একটি চেক তৈরি করব। যদি newsData স্টেটের দৈর্ঘ্য একের বেশি হয়, তবে আমাদের নিউজ ডেটা ধারণকারী FlatList দেখাব। অন্যথায় লোডিং স্পিনার দেখাব।

অন্য কথায়, যদি newsData স্টেটের দৈর্ঘ্য এক কম হয়, তবে এর মানে এটি খালি এবং API এখনও কল হচ্ছে। একবার API কল সমাপ্ত হলে, এটি ডেটা newsData স্টেটে সংরক্ষণ করবে, এবং স্টেটের দৈর্ঘ্য একের বেশি হয়ে যাবে।

{newsData.length > 1 ? ( <FlatList data={newsData} renderItem={({ item }) => ( <View> <View style={styles.newsContainer}> <Image width={550} height={250} resizeMode={"cover"} source={{ uri: item.urlToImage, }} alt="Alternate Text" /> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> <Divider my={2} bg="#e0e0e0" /> </View> )} keyExtractor={(item) => item.id} /> ) : ( <View style={styles.spinner}> <Spinner color="danger.400" /> </View> )}

আমাদের স্টাইলে স্পিনারের জন্য নিচের স্টাইল কোড যোগ করুন।

spinner: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: 400 }

আপনার রেফারেন্সের জন্য পুরো কোড নিচে দেওয়া হলো:

import React, { useEffect, useState } from 'react' import { View, Text, StyleSheet } from 'react-native'; import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base'; import { services } from '../services/services'; import moment from 'moment' export default function All() { const [newsData, setNewsData] = useState([]) useEffect(() => { services('general') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, []) return ( <NativeBaseProvider> <ScrollView height={850}> {newsData.length > 1 ? ( <FlatList data={newsData} renderItem={({ item }) => ( <View> <View style={styles.newsContainer}> <Image width={550} height={250} resizeMode={"cover"} source={{ uri: item.urlToImage, }} alt="Alternate Text" /> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> <Divider my={2} bg="#e0e0e0" /> </View> )} keyExtractor={(item) => item.id} /> ) : ( <View style={styles.spinner}> <Spinner color="danger.400" /> </View> )} </ScrollView> </NativeBaseProvider> ) } const styles = StyleSheet.create({ newsContainer: { padding: 10 }, title: { fontSize: 18, marginTop: 10, fontWeight: "600" }, newsDescription: { fontSize: 16, marginTop: 10 }, date: { fontSize: 14 }, spinner: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: 400 } });

আমাদের All.js স্ক্রিন এখন সম্পূর্ণ।

এখন, আমরা একই কোড অন্যান্য সব স্ক্রিনে ব্যবহার করতে পারি। শুধু useEffect হুকে services-এ পাস করা প্যারামিটারটি পরিবর্তন করতে হবে।

সেজন্য Business স্ক্রিনের জন্য business ব্যবহার করব। Health-এর জন্য health, ইত্যাদি।

import React, { useEffect, useState } from 'react' import { View, Text, StyleSheet } from 'react-native'; import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base'; import { services } from '../services/services'; import moment from 'moment' export default function Business() { const [newsData, setNewsData] = useState([]) useEffect(() => { services('business') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, []) return ( <NativeBaseProvider> <ScrollView height={850}> {newsData.length > 1 ? ( <FlatList data={newsData} renderItem={({ item }) => ( <View> <View style={styles.newsContainer}> <Image width={550} height={250} resizeMode={"cover"} source={{ uri: item.urlToImage, }} alt="Alternate Text" /> <Text style={styles.title}> {item.title} </Text> <Text style={styles.date}> {moment(item.publishedAt).format('LLL')} </Text> <Text style={styles.newsDescription}> {item.description} </Text> </View> <Divider my={2} bg="#e0e0e0" /> </View> )} keyExtractor={(item) => item.id} /> ) : ( <View style={styles.spinner}> <Spinner color="danger.400" /> </View> )} </ScrollView> </NativeBaseProvider> ) } const styles = StyleSheet.create({ newsContainer: { padding: 10 }, title: { fontSize: 18, marginTop: 10, fontWeight: "600" }, newsDescription: { fontSize: 16, marginTop: 10 }, date: { fontSize: 14 }, spinner: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: 400 } });

বিজনেস স্ক্রিন নিচে স্ক্রোল করলে বিজনেস সংক্রান্ত নিউজ দেখতে পাবেন।

একইভাবে অন্যান্য সব স্ক্রিনের জন্যও করতে পারেন:

useEffect(() => { services('business') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, [])

useEffect(() => { services('health') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, [])

useEffect(() => { services('sports') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, [])

useEffect(() => { services('technology') .then(data => { setNewsData(data) }) .catch(error => { alert(error) }) }, [])

উপসংহার

অভিনন্দন! এখন আমাদের নিউজ অ্যাপ্লিকেশন সম্পূর্ণ।

তাহলে এগিয়ে যান, এটি বিল্ড করে একটু পরীক্ষা-নিরীক্ষা করুন। আপনি অনেক কিছু করতে পারেন।

আমার ইউটিউব চ্যানেলে রিয়েক্ট নেটিভ এবং নেটিভ বেস ব্যবহার করে নিউজ অ্যাপ্লিকেশন বিল্ড করার প্লেলিস্ট চেক আউট করুন।

কোডটি এখান থেকে ডাউনলোড করতে পারেন: https://github.com/nishant-666/React-Native-News

শুভ শেখা।