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

আমরা এমন একটি পৃথিবীতে বাস করি যেখানে জিনিসগুলি ক্রমাগত পরিবর্তিত হচ্ছে। তাই আপনি কি ঘটছে তা আপ টু ডেট থাকতে চান, আপনি একটি ভাল খবর অ্যাপ্লিকেশন চাইবেন.

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

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

আমাদের কাজ শেষ হলে আমাদের অ্যাপটি এভাবেই দেখাবে। সুতরাং আসুন সরাসরি এটিতে ঝাঁপ দেওয়া যাক।

এক্সপো কিভাবে ইনস্টল করবেন

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

এটি ইনস্টল করা যাক।

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

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

৷

আমাদের আউটপুট

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

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

https://reactnavigation.org/-এ যান এবং ডক্স পড়ুন-এ ক্লিক করুন। এটি ডকুমেন্টেশন পৃষ্ঠা খুলবে৷

৷

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

npm install @react-navigation/native

expo install react-native-screens react-native-safe-area-context

প্রতিক্রিয়া নেভিগেশন ইনস্টল করা হচ্ছে

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

আমরা bottomTabNavigator ব্যবহার করব . তাই, বাম মেনু থেকে, API রেফারেন্স, তারপর নেভিগেটর, তারপর নীচের ট্যাবগুলি বেছে নিন৷

নীচের ট্যাবগুলি বেছে নিন

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

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

স্ক্রিনগুলির জন্য কোড

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

আমাদের পাঁচটি স্ক্রিন যথা সব, ব্যবসা, স্বাস্থ্য, খেলাধুলা এবং প্রযুক্তি

আমাদের এখানে সকলের জন্য পাঁচটি স্ক্রীন রয়েছে, ব্যবসা, স্বাস্থ্য, খেলাধুলা এবং প্রযুক্তি৷

৷

এখন, এখানে কিছু সমন্বয় করা যাক. আমাদের নীচের ট্যাবগুলির জন্য আইকনগুলি পরিবর্তন করতে হবে৷

এটি করার জন্য, আমাদের আইকনগুলির জন্য একটি আইকন লাইব্রেরি পেতে হবে। এর জন্য আমরা 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} />
            ),
          }} />

হোম পেজের জন্য আইকন যোগ করা হচ্ছে

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

হোম আইকন সহ নীচের ট্যাব নেভিগেটর

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

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

আইকন সহ নীচের সমস্ত ট্যাব

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

নিউজ এপিআই-কে কীভাবে কল করবেন

এখন, https://newsapi.org/

থেকে News API-কে কল করা যাক প্রতিক্রিয়া নেটিভ এবং নেটিভ বেস সহ একটি অ্যান্ড্রয়েড নিউজ অ্যাপ কীভাবে তৈরি করবেন

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

৷

সমস্ত সংবাদ ধ্রুবক সংরক্ষণ করার জন্য আমাদের একটি কনফিগার ফাইল প্রয়োজন, তাই আসুন এটি তৈরি করি।

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

আমাদের config.js

আমাদের API_KEY, এন্ডপয়েন্ট এবং দেশের কোড দরকার।

এখন, আমাদের GET API অনুরোধের জন্য একটি পরিষেবা তৈরি করতে হবে৷৷

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

এখানে, API_KEY, এন্ডপয়েন্ট এবং শীর্ষে দেশ আমদানি করুন।

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

Services.js

তারপর, আমরা আমাদের পরিষেবা সংস্থা লিখব৷

৷

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

আমাদের GET API পরিষেবা

সুতরাং, আমরা আমাদের এন্ডপয়েন্ট ব্যবহার করে এবং দেশ এবং বিভাগ যুক্ত করে খবরের ডেটা আনছি। ফাংশনে, আমরা বিভাগটিকে সাধারণ হিসাবে পাস করি কারণ এটি ডিফল্ট বিভাগ। আমরা শিরোনামগুলিতে 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';

All.js এ পরিষেবা আমদানি করুন

আমাদের 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>
    )
}

useState এবং useEffect হুক ব্যবহার করা

এই ফাইলে, আমরা আমাদের useEffect হুকের পরিষেবাগুলিকে কল করি। এবং তারপর আমরা প্রতিক্রিয়া সঞ্চয় newsData রাষ্ট্র, যা একটি অ্যারে. আমরা সাধারণ যে বিভাগের জন্য একটি প্যারামিটার পাস করি।

এই স্ক্রিনটি সমস্ত খবর নিয়ে আসবে, তাই আমরা সাধারণ বিভাগ ব্যবহার করি। এটি প্রতিটি অন্য স্ক্রিনের জন্য পরিবর্তিত হবে। এটা স্বাস্থ্য হবে স্বাস্থ্য পর্দার জন্য, ক্রীড়া খেলাধুলার জন্য, ইত্যাদি।

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

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

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

রিটার্নে 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
    },
});

All.js এ আমাদের স্টাইলশীট

কিছু স্টাইলিং পাওয়ার পরে অ্যাপ্লিকেশনটি এখন এইভাবে দেখায়। এছাড়াও আপনি পৃষ্ঠাটি নিচে স্ক্রোল করতে পারেন।

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

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

npm install moment --save

সময় ফর্ম্যাট করতে Moment.js ইনস্টল করুন

তারপর, এটি আমাদের All.js স্ক্রিনে আমদানি করুন:

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

Moment.js ব্যবহার করে তারিখ এবং সময় ফর্ম্যাট করা

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

Moment.js সময় এবং তারিখ বিন্যাস

মুহূর্তের ডকুমেন্টেশন আমাদের বেছে নেওয়ার জন্য অনেক ফরম্যাট দেয়। আমি '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>

একটি বিভাজক যোগ করা হচ্ছে

সুতরাং, চাইল্ড ভিউয়ের পরে একটি বিভাজক যুক্ত করার পরে, আমাদের অ্যাপটি এইরকম দেখায়:

এখন আমাদের খবরের শিরোনামগুলি বিভক্ত করা হয়েছে যা দেখতে দুর্দান্ত৷

৷

এই নিউজ এপিআইয়ের একটি চিত্রও রয়েছে। সুতরাং, আসুন এটি যোগ করি।

<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-এ হুক।

সুতরাং, ব্যবসার পর্দার জন্য, আমরা ব্যবসা ব্যবহার করব। স্বাস্থ্যের জন্য, আমরা স্বাস্থ্য ব্যবহার করব, ইত্যাদি।

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