हम एक ऐसी दुनिया में रहते हैं जहां चीजें लगातार बदल रही हैं। इसलिए यदि आप जो हो रहा है उस पर अद्यतित रहना चाहते हैं, तो आपको एक अच्छा समाचार ऐप चाहिए।
कुछ अच्छी तकनीक सीखने और वर्तमान में बने रहने में आपकी मदद करने के लिए, इस ब्लॉग पोस्ट में हम रिएक्ट नेटिव का उपयोग करके Android के लिए एक समाचार एप्लिकेशन बनाएंगे। यह विभिन्न समाचार चैनलों से सुर्खियां बटोरेगा और उन्हें श्रेणी के अनुसार दिखाएगा।
जब हम काम पूरा कर लेंगे तो हमारा ऐप इस तरह दिखेगा। तो चलिए इसमें सीधे कूदते हैं।
एक्सपो कैसे स्थापित करें
तो, एक्सपो क्या है? एक्सपो एक ऐसा ढांचा है जो आपको रिएक्ट नेटिव ऐप को जल्दी और आसानी से बनाने और तैनात करने में मदद करता है।
आइए इसे स्थापित करें।
npm install --global expo-cli
एक्सपो सीएलआई स्थापित करने के लिए इस कमांड को अपने टर्मिनल में चलाएँ। यहां, हम --global . का उपयोग कर रहे हैं यह सुनिश्चित करने के लिए कि यह हर जगह स्थापित हो।
इसे स्थापित करने के बाद, हमें एक एक्सपो प्रोजेक्ट बनाने की आवश्यकता है।
expo init News-Applicationप्रोजेक्ट को इनिशियलाइज़ करने के लिए उपरोक्त कमांड का उपयोग करें। यह आपसे कुछ प्रश्न पूछेगा, जैसे आपके आवेदन का नाम, क्या आप अपने प्रोजेक्ट में टाइपस्क्रिप्ट जोड़ना चाहते हैं, या किसी रिक्त प्रोजेक्ट से शुरुआत करना चाहते हैं। बस रिक्त का चयन करें, और एंटर दबाएं।
फिर, यह फ़ोल्डर में सभी संकुल और निर्भरताओं को डाउनलोड करेगा।
अब, यह हो जाने के बाद, प्रोजेक्ट फ़ोल्डर में नेविगेट करें। एप्लिकेशन प्रारंभ करने के लिए, एक्सपो प्रारंभ type टाइप करें . यह ब्राउज़र में डेवलपर टूल खोलेगा।
यहां आपको बाईं ओर कई विकल्प दिखाई देंगे, जैसे Android डिवाइस/एमुलेटर पर चलाना, या iOS सिम्युलेटर पर। हम वेब ब्राउजर पर एप्लिकेशन चलाएंगे, इसलिए रन इन वेब ब्राउजर विकल्प पर क्लिक करें।
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/ पर जाएं और डॉक्स पढ़ें पर क्लिक करें। यह दस्तावेज़ीकरण पृष्ठ खोलेगा।
आइए नीचे दिए गए कमांड का उपयोग करके रिएक्ट नेविगेशन स्थापित करें:
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-contextअब, हमारा रिएक्ट नेविगेशन स्थापित हो गया है।
हम उपयोग करेंगे bottomTabNavigator . तो, बाएं मेनू से, एपीआई संदर्भ चुनें, फिर नेविगेटर, फिर नीचे के टैब चुनें।
आइए नीचे दिए गए कमांड का उपयोग करके बॉटम टैब्स इंस्टॉल करें:
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>हमें निम्नलिखित टैब के लिए ये स्क्रीन बनाने की आवश्यकता है:सभी समाचार, व्यावसायिक समाचार, खेल समाचार, स्वास्थ्य समाचार और तकनीकी समाचार। साथ ही, प्रत्येक स्क्रीन के लिए प्रोजेक्ट में एक घटक बनाएं।
हमें इस TabNavigtor को लपेटने की जरूरत है एक 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>
);
} और यह हमारा आउटपुट होगा:
हमारे यहां सभी, व्यवसाय, स्वास्थ्य, खेल और तकनीक के लिए पांच स्क्रीन हैं।
अब, यहाँ कुछ समायोजन करते हैं। हमें नीचे के टैब के लिए आइकन बदलने की जरूरत है।
ऐसा करने के लिए, हमें अपने आइकनों के लिए एक आइकन लाइब्रेरी प्राप्त करने की आवश्यकता होगी। उसके लिए हम प्रतिक्रिया-मूल-तत्वों का उपयोग करने जा रहे हैं।
इसे स्थापित करने के लिए, निम्न कमांड टाइप करें:
npm install react-native-elementsइस आइकन पैकेज में चुनने के लिए बहुत सारे आइकन विकल्प हैं।
अब बॉटम टैब नेविगेटर में अपने आइकॉन जोड़ते हैं।
<Tab.Screen name="All" component={All}
options={{
tabBarIcon: (props) => (
<Icon type='feather' name='home' color={props.color} />
),
}} />यहां हमने होम पेज के लिए "होम" नाम का आइकन और टाइप के लिए फेदर आइकन क्लास जोड़ा है।
यह उपरोक्त आउटपुट देगा। और इसी तरह, आइए उन सभी के लिए भी यही प्रक्रिया दोहराएं।
<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 को कैसे कॉल करें
अब, न्यूज़ API को https://newsapi.org/
. से कॉल करें
इस वेबसाइट पर जाएं और साइनअप करें। यह आपको एक एपीआई कुंजी देगा।
हमें सभी समाचार स्थिरांक संग्रहीत करने के लिए एक कॉन्फ़िग फ़ाइल की आवश्यकता है, तो चलिए इसे बनाते हैं।
export const API_KEY = ``;
export const endpoint = `https://newsapi.org/v2/top-headlines`;
export const country = 'in'हमें API_KEY, समापन बिंदु और देश कोड की आवश्यकता है।
अब, हमें अपने GET API अनुरोध के लिए एक सेवा बनाने की आवश्यकता है।
services.js. . नामक फ़ाइल बनाएं
यहां, API_KEY, एंडपॉइंट और शीर्ष पर स्थित देश आयात करें।
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;
}इसलिए, हम अपने समापन बिंदु का उपयोग करके और देश और श्रेणी को जोड़कर समाचार डेटा प्राप्त कर रहे हैं। फ़ंक्शन में, हम श्रेणी को सामान्य रूप से पास करते हैं क्योंकि वह डिफ़ॉल्ट श्रेणी है। हम हेडर में API_key भी पास करते हैं।
फिर, हम प्रतिक्रिया, या आने वाले डेटा को JSON प्रारूप में परिवर्तित करते हैं और इसे परिणाम चर में संग्रहीत करते हैं।
और अंत में, हम इसे 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 हुक में कहते हैं। और फिर हम न्यूजडाटा स्थिति में प्रतिक्रिया संग्रहीत करते हैं, जो एक सरणी है। हम उस श्रेणी के लिए एक पैरामीटर भी पास करते हैं जो सामान्य है।
यह स्क्रीन सभी समाचार प्राप्त करेगी, इसलिए हम सामान्य श्रेणी का उपयोग करते हैं। यह हर दूसरी स्क्रीन के लिए बदल जाएगा। यह स्वास्थ्य . होगा स्वास्थ्य स्क्रीन के लिए, खेल खेलकूद आदि के लिए।
अब, हमें इस डेटा को अपने इंटरफ़ेस में दिखाना होगा। और उसके लिए, हमें अभी तक एक और पैकेज चाहिए, जिसे नेटिव बेस कहा जाता है। तो, चलिए इसे स्थापित करते हैं।
नेटिव बेस इंस्टाल करने के लिए नीचे दिए गए कमांड टाइप करें:
yarn add native-base styled-components styled-system
expo install react-native-svg react-native-safe-area-contextAll.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>
)फिर, स्क्रॉल व्यू जोड़ें। यदि समाचार डेटा हमारी स्क्रीन की ऊंचाई से आगे जाता है तो यह उपयोगकर्ताओं को स्क्रॉल करने देगा।
<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 एक डेटा प्रोप लेता है, जो हमारा newsData है बताएं कि हमने पहले बनाया था, और यह एक item . देता है renderItems . से .
यह 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' समझ में नहीं आता है।
हम उसके लिए उपयोगी क्षण.जेएस पैकेज का उपयोग करेंगे, तो चलिए नीचे दिए गए कमांड का उपयोग करके इसे स्थापित करते हैं:
npm install moment --saveफिर, इसे हमारी All.js स्क्रीन में आयात करें:
<Text style={styles.date}>
{moment(item.publishedAt).format('LLL')}
</Text>दिनांक को इस प्रकार प्रारूपित करें:
पल दस्तावेज हमें चुनने के लिए बहुत सारे प्रारूप देता है। मैंने '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 राज्य की लंबाई एक से कम है, इसका मतलब है कि यह खाली है और एपीआई अभी भी कहा जा रहा है। एक बार एपीआई कॉल खत्म होने के बाद, यह डेटा को 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 . में हुक।
तो, व्यापार स्क्रीन के लिए, हम व्यापार का उपयोग करेंगे। स्वास्थ्य के लिए, हम स्वास्थ्य आदि का उपयोग करेंगे।
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)
})
}, [])निष्कर्ष
बधाई हो! अब हमारा समाचार आवेदन पूरा हो गया है।
तो आगे बढ़ें, निर्माण करें और इसके साथ थोड़ा प्रयोग करें। आप बहुत सी चीजें कर सकते हैं।
आप मेरे YouTube चैनल पर रिएक्ट नेटिव और नेटिव बेस का उपयोग करके बिल्ड ए न्यूज एप्लिकेशन पर मेरी प्लेलिस्ट देख सकते हैं।
बेझिझक यहां कोड डाउनलोड करें:https://github.com/nishant-666/React-Native-News
हैप्पी लर्निंग।