React Native और Native Base के साथ एक मजबूत Android न्यूज़ ऐप बनाएं

हम एक ऐसी दुनिया में रहते हैं जहां चीजें लगातार बदल रही हैं। इसलिए अगर आप घटनाओं से अपडेट रहना चाहते हैं, तो आपको एक अच्छा न्यूज़ ऐप चाहिए।

कुछ अच्छी तकनीक सीखने और अपडेट रहने में आपकी मदद करने के लिए, इस ब्लॉग पोस्ट में हम React Native का उपयोग करके Android के लिए एक न्यूज़ एप्लिकेशन बनाएंगे। यह विभिन्न न्यूज़ चैनलों से हेडलाइन लाएगा और उन्हें श्रेणी के अनुसार दिखाएगा।

जब हमारा काम पूरा हो जाएगा तो हमारा ऐप ऐसा दिखेगा। तो चलिए सीधे शुरू करते हैं।

Expo कैसे इंस्टॉल करें

Expo क्या है? Expo एक फ्रेमवर्क है जो आपको React Native ऐप को तेजी से और आसानी से बनाने और डेप्लॉय करने में मदद करता है।

इसे इंस्टॉल करते हैं।

npm install --global expo-cli

इस कमांड को अपने टर्मिनल में चलाएं Expo CLI इंस्टॉल करने के लिए। यहां हम --global का उपयोग कर रहे हैं ताकि यह हर जगह इंस्टॉल हो जाए।

इंस्टॉल होने के बाद, हमें एक Expo प्रोजेक्ट बनाना होगा।

expo init News-Application

प्रोजेक्ट इनिशियलाइज़ करने के लिए उपरोक्त कमांड का उपयोग करें। यह आपसे कुछ सवाल पूछेगा, जैसे आपके एप्लिकेशन का नाम, क्या आप अपने प्रोजेक्ट में TypeScript जोड़ना चाहते हैं, या ब्लैंक प्रोजेक्ट से शुरू करना चाहते हैं। बस ब्लैंक चुनें और एंटर दबाएं।

फिर यह फोल्डर में सभी पैकेज और निर्भरताएं डाउनलोड करेगा।

अब, इसके पूरा होने के बाद, प्रोजेक्ट फोल्डर में नेविगेट करें। एप्लिकेशन शुरू करने के लिए, expo start टाइप करें। यह ब्राउज़र में डेवलपर टूल्स खोलेगा।

यहां बाईं ओर कई विकल्प दिखाई देंगे, जैसे Android डिवाइस/एमुलेटर पर चलाएं, या 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 फाइल है, जिसमें डिफ़ॉल्ट बॉयलरप्लेट कोड है।

अब हमारा एप्लिकेशन चल रहा है।

React Navigation का उपयोग करके विभिन्न स्क्रीन कैसे बनाएं

अब, आइए अपने एप्लिकेशन के लिए विभिन्न स्क्रीन बनाएं। इसके लिए हम React Navigation का उपयोग करेंगे। तो, इसे इंस्टॉल करते हैं।

https://reactnavigation.org/ पर जाएं और Read Docs पर क्लिक करें। यह डॉक्यूमेंटेशन पेज खोलेगा।

नीचे दिए गए कमांड का उपयोग करके React Navigation इंस्टॉल करें:

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

अब, हमारा React Navigation इंस्टॉल हो चुका है।

हम bottomTabNavigator का उपयोग करेंगे। तो, बाएं मेनू से API Reference चुनें, फिर Navigators, फिर Bottom Tabs।

नीचे दिए गए कमांड का उपयोग करके Bottom Tabs इंस्टॉल करें:

npm install @react-navigation/bottom-tabs

अब, हमारी App.js फाइल में, हमें Bottom Tabs इंपोर्ट करना होगा ताकि हम इसका उपयोग कर सकें।

इसे इस तरह इंपोर्ट करें:

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

अब, आइए Tab Screens इंपोर्ट करें।

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> ); }

इस तरह हम Bottom Tabs बनाते हैं।

हमारे मामले में, हमें ऐसा कुछ करना होगा:

<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

इस आइकन पैकेज में चुनने के लिए बहुत सारे आइकन विकल्प हैं।

अब आइए Bottom Tab Navigator में अपने आइकन जोड़ें।

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

यहां हमने होम पेज के लिए "home" नाम का आइकन और feather आइकन क्लास को टाइप के रूप में जोड़ा है।

यह उपरोक्त आउटपुट देगा। और इसी तरह, उन सभी के लिए वही प्रक्रिया दोहराएं।

<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>

अब हमारे प्रत्येक अलग टैब या स्क्रीन हो चुके हैं, और उनमें से प्रत्येक का अपना विशिष्ट आइकन है।

News API को कैसे कॉल करें

अब, https://newsapi.org/ से News API को कॉल करते हैं।

इस वेबसाइट पर जाएं और साइन अप करें। यह आपको एक API कुंजी देगा।

हमें सभी न्यूज़ स्थिरांक स्टोर करने के लिए एक कॉन्फिग फाइल बनाने की आवश्यकता है, तो आइए इसे बनाएं।

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

हमें API_KEY, endpoint, और देश कोड की आवश्यकता है।

अब, हमें अपने GET API Request के लिए एक सर्विस बनाने की आवश्यकता है।

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; }

तो, हम अपने endpoint का उपयोग करके न्यूज़ डेटा ला रहे हैं, और देश और श्रेणी को जोड़ रहे हैं। फंक्शन में, हम श्रेणी को general के रूप में पास करते हैं क्योंकि वह डिफ़ॉल्ट श्रेणी है। हम हेडर में API_key भी पास करते हैं।

फिर, हम प्रतिक्रिया या आने वाले डेटा को 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 नामक एक और पैकेज की आवश्यकता है। तो, आइए इसे इंस्टॉल करें।

Native Base इंस्टॉल करने के लिए नीचे दिए गए कमांड टाइप करें:

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

All.js में, आइए Native Base से कुछ चीजें इंपोर्ट करें:

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> )

फिर, आइए Scroll View जोड़ें। यह उपयोगकर्ताओं को स्क्रॉल करने देगा यदि न्यूज़ डेटा हमारी स्क्रीन की ऊंचाई से आगे जाता है।

<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 प्रॉप लेता है, जो हमारा newsData स्टेट है जिसे हमने पहले बनाया था, और यह renderItems से एक item वापस करता है।

यह JavaScript में 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>

इसमें हमारी न्यूज़ हेडलाइन शीर्षक, विवरण, और प्रकाशन तिथि शामिल है।

अपने React Native न्यूज़ ऐप को स्टाइल कैसे करें

यह है कि हमारा ऐप अब कैसा दिखता है, न्यूज़ शीर्षक, विवरण, और तिथि के साथ। इसे थोड़ा बेहतर दिखाने के लिए, हमें इसे कुछ स्टाइलिंग देने की आवश्यकता है।

शीर्ष पर React Native से 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>

तो, चाइल्ड व्यू के बाद डिवाइडर जोड़ने के बाद, हमारा ऐप ऐसा दिखता है:

अब हमारे न्यूज़ हेडलाइन विभाजित हैं जो बहुत अच्छा दिखता है।

इस News 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 } });

Business स्क्रीन को नीचे स्क्रॉल करें, और आपको बिजनेस से संबंधित न्यूज़ दिखाई देंगे।

और आप अन्य सभी स्क्रीन के लिए भी ऐसा ही कर सकते हैं:

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) }) }, [])

निष्कर्ष

बधाई हो! अब हमारा न्यूज़ एप्लिकेशन पूरा हो गया है।

तो आगे बढ़ें, इसे बिल्ड करें और इसके साथ थोड़ा प्रयोग करें। बहुत सारी चीजें हैं जो आप कर सकते हैं।

आप React Native और Native Base का उपयोग करके न्यूज़ एप्लिकेशन बनाने पर मेरी प्लेलिस्ट देख सकते हैं, जो मेरे YouTube चैनल पर है।

बेझिझक यहां से कोड डाउनलोड करें: https://github.com/nishant-666/React-Native-News

हैप्पी लर्निंग।