วิธีสร้างแอพ Android News ด้วย React Native และ Native Base

เราอยู่ในโลกที่สิ่งต่าง ๆ เปลี่ยนแปลงตลอดเวลา ดังนั้นหากคุณต้องการติดตามข่าวสารล่าสุดเกี่ยวกับสิ่งที่เกิดขึ้น คุณจะต้องการแอปข่าวที่ดี

เพื่อช่วยให้คุณเรียนรู้เทคโนโลยีเจ๋ง ๆ และทันเหตุการณ์ ในบล็อกโพสต์นี้ เราจะสร้างแอปพลิเคชันข่าวสำหรับ Android โดยใช้ React Native มันจะดึงพาดหัวข่าวจากช่องข่าวต่างๆ และแสดงตามหมวดหมู่

วิธีสร้างแอพ Android News ด้วย React Native และ Native Base

นี่คือลักษณะที่แอปของเราจะมีลักษณะเมื่อเราทำเสร็จแล้ว งั้นก็โดดลงไปเลย

วิธีการติดตั้ง Expo

แล้วงานเอ็กซ์โปคืออะไร? Expo เป็นเฟรมเวิร์กที่ช่วยให้คุณสร้างและใช้งานแอป React Native ได้อย่างรวดเร็วและง่ายดาย

มาติดตั้งกันเลย

npm install --global expo-cli

การติดตั้ง Expo

รันคำสั่งนี้ในเทอร์มินัลของคุณเพื่อติดตั้ง Expo CLI ที่นี่เราใช้ --global เพื่อให้แน่ใจว่าจะติดตั้งได้ทุกที่

หลังจากติดตั้งแล้ว เราต้องสร้าง Expo Project

expo init News-Application

การสร้างโปรเจ็กต์งานเอ็กซ์โป

ใช้คำสั่งด้านบนเพื่อเริ่มต้นโครงการ มันจะถามคำถามสองสามข้อกับคุณ เช่น ชื่อแอปพลิเคชันของคุณ ว่าคุณต้องการเพิ่ม TypeScript ในโครงการของคุณ หรือเริ่มต้นด้วยโครงการเปล่า เพียงเลือกว่างแล้วกด Enter

จากนั้นจะดาวน์โหลดแพ็คเกจและการอ้างอิงทั้งหมดในโฟลเดอร์

หลังจากเสร็จแล้ว ให้ไปที่โฟลเดอร์โครงการ หากต้องการเริ่มแอปพลิเคชัน ให้พิมพ์ expo start . มันจะเปิดเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์

เครื่องมือสำหรับนักพัฒนา Expo

คุณจะเห็นตัวเลือกมากมายทางด้านซ้าย เช่น เรียกใช้บนอุปกรณ์/โปรแกรมจำลอง 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 ของเรา

นี่คือไฟล์ App.js ของเราซึ่งมีต้นแบบเริ่มต้น

ผลลัพธ์ของเรา

ตอนนี้แอปพลิเคชันของเรากำลังทำงาน

ตอนนี้ มาสร้างหน้าจอต่างๆ สำหรับแอปพลิเคชันของเรากัน สำหรับสิ่งนั้น เราจะใช้ React Navigation มาติดตั้งกันเลย

ไปที่ https://reactnavigation.org/ และคลิกอ่านเอกสาร จะเปิดหน้าเอกสาร

มาติดตั้ง React Navigation โดยใช้คำสั่งด้านล่าง:

npm install @react-navigation/native

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

การติดตั้ง React Navigation

ตอนนี้ React Navigation ของเราได้รับการติดตั้งแล้ว

เราจะใช้ bottomTabNavigator . ดังนั้น จากเมนูด้านซ้าย ให้เลือก API Reference จากนั้นเลือก Navigators จากนั้นเลือกแท็บด้านล่าง

เลือกแท็บด้านล่าง

มาติดตั้งแท็บด้านล่างโดยใช้คำสั่งด้านล่าง:

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 นอกจากนี้ ให้สร้างองค์ประกอบหนึ่งรายการในโปรเจ็กต์สำหรับแต่ละหน้าจอ

เราต้องห่อ 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>
  );
}

รหัสสำหรับหน้าจอ

และนี่จะเป็นผลลัพธ์ของเรา:

ห้าหน้าจอของเรา ได้แก่ ทั้งหมด ธุรกิจ สุขภาพ กีฬา และเทคโนโลยี

เรามีหน้าจอทั้งหมด 5 จอสำหรับทั้งหมด ธุรกิจ สุขภาพ กีฬา และเทคโนโลยี

ตอนนี้ มาทำการปรับเปลี่ยนบางอย่างที่นี่ เราจำเป็นต้องเปลี่ยนไอคอนสำหรับแท็บด้านล่าง

ในการทำเช่นนั้น เราจะต้องได้รับคลังไอคอนสำหรับไอคอนของเรา เพื่อที่เราจะใช้ react-native-elements

หากต้องการติดตั้ง ให้พิมพ์คำสั่งด้านล่าง:

npm install react-native-elements

ติดตั้ง React Native Elements

แพ็คเกจไอคอนนี้มีตัวเลือกไอคอนมากมายให้เลือก

ไอคอนที่มีใน 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 ข่าวสาร

ทีนี้มาเรียก News API จาก https://newsapi.org/

ไปที่เว็บไซต์นี้และสมัคร มันจะให้คีย์ API แก่คุณ

เราต้องการไฟล์ปรับแต่งเพื่อเก็บค่าคงที่ของ News ทั้งหมด ดังนั้นมาสร้างมันกัน

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

config.js ของเรา

เราต้องการ API_KEY ปลายทาง และรหัสประเทศ

ตอนนี้ เราต้องสร้างบริการสำหรับ GET API Request

สร้างไฟล์ชื่อ 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 hooks

ในไฟล์นี้ เราเรียกใช้บริการใน useEffect hook ของเรา จากนั้นเราเก็บการตอบสนองในสถานะ newsData ซึ่งเป็นอาร์เรย์ นอกจากนี้เรายังส่งพารามิเตอร์สำหรับหมวดหมู่ที่เป็นทั่วไป

หน้าจอนี้จะดึงข้อมูลข่าวสารทั้งหมด ดังนั้นเราจึงใช้หมวดทั่วไป มันจะเปลี่ยนไปสำหรับทุกหน้าจออื่น ๆ มันจะเป็น สุขภาพ สำหรับหน้าจอสุขภาพ กีฬา สำหรับกีฬา เป็นต้น

ตอนนี้ เราต้องแสดงข้อมูลนี้ในอินเทอร์เฟซของเรา และสำหรับสิ่งนั้น เราจำเป็นต้องมีแพ็คเกจอื่นที่เรียกว่า Native Base มาติดตั้งกันเลย

พิมพ์คำสั่งด้านล่างเพื่อติดตั้ง Native Base:

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

การติดตั้ง Native Base

ใน 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';

การนำเข้าสิ่งของจาก Native Base

ในทางกลับกันเราจะเพิ่ม NativeBaseProvider .

return (
        <NativeBaseProvider>
            
        </NativeBaseProvider>
    )

การเพิ่ม NativeBaseProvider ในการส่งคืน

จากนั้น ให้เพิ่มมุมมองการเลื่อน ซึ่งจะทำให้ผู้ใช้เลื่อนดูหากข้อมูลข่าวเกินความสูงของหน้าจอ

<NativeBaseProvider>
            <ScrollView height={850}>

            </ScrollView>
        </NativeBaseProvider>

การเพิ่ม ScrollView

ทีนี้มาเพิ่ม FlatList . กัน เพื่อแสดงข้อมูลข่าวสารของเรา

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

                       </View> 
                    )}
                    keyExtractor={(item) => item.id}
                />
            </ScrollView>
        </NativeBaseProvider>

การใช้ FlatList

FlatList ใช้ data prop ซึ่งเป็น newsData . ของเรา ระบุว่าเราสร้างไว้ก่อนหน้านี้ และส่งคืน item จาก renderItems

คล้ายกับ map ใน JavaScript ซึ่งข้ามผ่านอาร์เรย์และส่งคืนรายการ นอกจากนี้ยังมี 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 News ของเรา

นี่คือรูปลักษณ์ของแอปของเราในขณะนี้ พร้อมชื่อข่าว คำอธิบาย และวันที่ เพื่อให้ดูสวยขึ้นอีกนิด เราต้องจัดสไตล์ให้มันดู

นำเข้า StyleSheet จาก React Native ที่ด้านบนเพื่อใช้สไตล์

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

การนำเข้า StyleSheet จาก 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

เอกสารประกอบ 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 ตะขอ

ดังนั้นสำหรับหน้าจอ Business เราจะใช้ Business เพื่อสุขภาพเราจะใช้สุขภาพเป็นต้น

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

สำหรับเทคโนโลยี

บทสรุป

ยินดีด้วย! ตอนนี้การสมัครข่าวของเราเสร็จสมบูรณ์แล้ว

ไปข้างหน้าสร้างและทดลองกับมันสักหน่อย มีหลายสิ่งที่คุณทำได้

คุณสามารถตรวจสอบเพลย์ลิสต์ของฉันบน Build a News Application โดยใช้ React Native และ Native Base ซึ่งอยู่ในช่อง YouTube ของฉัน

ดาวน์โหลดโค้ดได้ที่นี่:https://github.com/nishant-666/React-Native-News