Chúng ta đang sống trong một thế giới mà mọi thứ luôn thay đổi. Vì vậy, nếu bạn muốn cập nhật những gì đang xảy ra, bạn sẽ cần một ứng dụng Tin tức tốt.
Để giúp bạn tìm hiểu một số công nghệ thú vị và luôn cập nhật, trong bài đăng trên blog này, chúng tôi sẽ xây dựng Ứng dụng Tin tức cho Android bằng cách sử dụng React Native. Nó sẽ lấy các tiêu đề từ các kênh tin tức khác nhau và hiển thị chúng theo danh mục.
Đây là cách ứng dụng của chúng tôi sẽ trông như thế nào khi chúng tôi hoàn tất. Vì vậy, hãy bắt tay ngay vào nó.
Cách cài đặt Expo
Vậy, Expo là gì? Expo là một khuôn khổ giúp bạn xây dựng và triển khai ứng dụng React Native một cách nhanh chóng và dễ dàng.
Hãy cài đặt nó.
npm install --global expo-cli
Chạy lệnh này trong thiết bị đầu cuối của bạn để cài đặt Expo CLI. Ở đây, chúng tôi đang sử dụng --global để đảm bảo nó được cài đặt ở mọi nơi.
Sau khi nó đã được cài đặt, chúng ta cần tạo một Dự án Expo.
expo init News-ApplicationSử dụng lệnh trên để khởi tạo dự án. Nó sẽ hỏi bạn một số câu hỏi, chẳng hạn như tên ứng dụng của bạn, liệu bạn muốn thêm TypeScript vào dự án của mình hay bắt đầu với một dự án trống. Chỉ cần chọn trống và nhấn enter.
Sau đó, nó sẽ tải xuống tất cả các gói và phụ thuộc trong thư mục.
Bây giờ, sau khi hoàn tất, hãy điều hướng vào thư mục dự án. Để bắt đầu ứng dụng, hãy nhập bắt đầu triển lãm . Nó sẽ mở ra các công cụ dành cho nhà phát triển trong trình duyệt.
Tại đây, bạn sẽ thấy nhiều tùy chọn ở bên trái, như chạy trên thiết bị / trình giả lập Android hoặc trên trình mô phỏng iOS. Chúng tôi sẽ chạy ứng dụng trên Trình duyệt web, vì vậy hãy nhấp vào tùy chọn Chạy trong trình duyệt web.
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',
},
});
Đây là tệp App.js của chúng tôi, có chứa bản soạn thảo mặc định.
Bây giờ ứng dụng của chúng tôi đang chạy.
Cách tạo các màn hình khác nhau bằng Điều hướng phản ứng
Bây giờ, hãy tạo nhiều màn hình khác nhau cho ứng dụng của chúng ta. Đối với điều đó, chúng tôi sẽ sử dụng React Navigation. Vì vậy, hãy cài đặt nó.
Truy cập https://reactnavigation.org/ và nhấp vào Đọc tài liệu. Nó sẽ mở ra trang tài liệu.
Hãy cài đặt React Navigation bằng cách sử dụng lệnh bên dưới:
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-contextBây giờ, Điều hướng React của chúng tôi đã được cài đặt.
Chúng tôi sẽ sử dụng bottomTabNavigator . Vì vậy, từ menu bên trái, hãy chọn Tham chiếu API, sau đó chọn Bộ điều hướng, sau đó chọn Tab dưới cùng.
Hãy cài đặt các Tab dưới cùng bằng lệnh dưới đây:
npm install @react-navigation/bottom-tabsBây giờ, trong tệp App.js của chúng tôi, chúng tôi cần nhập các Tab dưới cùng để sử dụng nó.
Vì vậy, hãy nhập nó như thế này:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
Bây giờ, hãy nhập Màn hình tab.
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>
);
}Đây là cách chúng tôi tạo các Tab dưới cùng.
Trong trường hợp của chúng tôi, chúng tôi cần làm điều gì đó như sau:
<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>Chúng ta cần tạo các màn hình này cho các tab sau:Tất cả Tin tức, Tin tức kinh doanh, Tin tức thể thao, Tin tức sức khỏe và Tin tức công nghệ. Ngoài ra, hãy tạo một thành phần trong Dự án cho mỗi màn hình.
Chúng ta cần bọc TabNavigtor này thành một NavigationContainer như thế này:
<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>Chúng tôi cũng cần nhập tất cả các thành phần này, vì vậy hãy nhập chúng ở đầu.
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';Bây giờ, nếu chúng ta đặt tất cả mã mà chúng ta đã viết lại với nhau, chúng ta sẽ nhận được đoạn mã dưới đây:
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>
);
} Và đây sẽ là đầu ra của chúng tôi:
Chúng tôi có năm màn hình ở đây cho Tất cả, Doanh nghiệp, Sức khỏe, Thể thao và Công nghệ.
Bây giờ, chúng ta hãy thực hiện một vài điều chỉnh ở đây. Chúng tôi cần thay đổi các biểu tượng cho các tab dưới cùng.
Để làm điều đó, chúng tôi sẽ cần có một thư viện biểu tượng cho các biểu tượng của chúng tôi. Đối với điều đó, chúng tôi sẽ sử dụng các yếu tố react-native.
Để cài đặt nó, hãy nhập lệnh dưới đây:
npm install react-native-elementsGói biểu tượng này có rất nhiều tùy chọn biểu tượng để bạn lựa chọn.
Bây giờ, hãy thêm các biểu tượng của chúng ta trong Bộ điều hướng Tab Dưới cùng.
<Tab.Screen name="All" component={All}
options={{
tabBarIcon: (props) => (
<Icon type='feather' name='home' color={props.color} />
),
}} />Ở đây chúng tôi đã thêm biểu tượng có tên "home" cho trang chủ và lớp biểu tượng lông vũ cho loại.
Điều này sẽ mang lại kết quả trên. Và tương tự, hãy lặp lại quy trình tương tự cho tất cả chúng.
<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>
Giờ đây, mỗi tab hoặc màn hình khác nhau của chúng ta đã hoàn thành và chúng đều có biểu tượng riêng biệt.
Cách gọi API Tin tức
Bây giờ, hãy gọi API Tin tức từ https://newsapi.org/
Truy cập trang web này và đăng ký. Nó sẽ cung cấp cho bạn một khóa API.
Chúng tôi cần một tệp cấu hình để lưu trữ tất cả các hằng số Tin tức, vì vậy hãy tạo nó.
export const API_KEY = ``;
export const endpoint = `https://newsapi.org/v2/top-headlines`;
export const country = 'in'Chúng tôi cần API_KEY, điểm cuối và mã quốc gia.
Bây giờ, chúng tôi cần tạo một dịch vụ cho Yêu cầu API GET của chúng tôi.
Tạo tệp có tên services.js.
Tại đây, nhập API_KEY, điểm cuối và quốc gia ở trên cùng.
import { API_KEY, endpoint, country } from '../config/config';Sau đó, chúng tôi sẽ viết phần dịch vụ của mình.
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;
}Vì vậy, chúng tôi đang tìm nạp dữ liệu tin tức bằng cách sử dụng điểm cuối của chúng tôi, đồng thời thêm quốc gia và danh mục. Trong hàm, chúng tôi chuyển danh mục là chung vì đó là danh mục mặc định. Chúng tôi cũng chuyển API_key trong tiêu đề.
Sau đó, chúng tôi chuyển đổi phản hồi hoặc dữ liệu đến sang định dạng JSON và lưu trữ nó trong một biến kết quả.
Và cuối cùng, chúng tôi sẽ trả lại nó bằng cách sử dụng return từ khóa.
Đây là toàn bộ tệp để bạn tham khảo:
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;
}Bây giờ, chúng tôi cần nhập dịch vụ này vào tệp All.js của chúng tôi.
import { services } from '../services/services';
Chúng tôi sẽ cần sử dụng useState và useEffect móc câu. Hook useEffect sẽ gọi dịch vụ này trong tệp All.js và useState sẽ tạo một trạng thái sẽ lưu trữ phản hồi đến từ 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>
)
}
Trong tệp này, chúng tôi gọi các dịch vụ trong móc useEffect của chúng tôi. Và sau đó chúng tôi lưu trữ phản hồi ở trạng thái newsData, là một mảng. Chúng tôi cũng truyền một tham số cho danh mục là chung.
Màn hình này sẽ tìm nạp tất cả tin tức, vì vậy chúng tôi sử dụng danh mục chung. Nó sẽ thay đổi cho mọi màn hình khác. Nó sẽ là sức khỏe cho màn hình Sức khỏe, thể thao cho Thể thao, v.v.
Bây giờ, chúng ta cần hiển thị dữ liệu này trong giao diện của mình. Và để làm được điều đó, chúng ta cần một gói khác có tên là Native Base. Vì vậy, hãy cài đặt nó.
Nhập các lệnh bên dưới để cài đặt Native Base:
yarn add native-base styled-components styled-system
expo install react-native-svg react-native-safe-area-contextTrong All.js, hãy nhập một vài thứ từ 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';
Sau đó, để trả lại, chúng tôi sẽ thêm NativeBaseProvider .
return (
<NativeBaseProvider>
</NativeBaseProvider>
)Sau đó, hãy thêm Chế độ xem cuộn. Điều này sẽ cho phép người dùng cuộn nếu dữ liệu tin tức vượt quá chiều cao màn hình của chúng tôi.
<NativeBaseProvider>
<ScrollView height={850}>
</ScrollView>
</NativeBaseProvider>
Bây giờ, hãy thêm FlatList để hiển thị dữ liệu tin tức của chúng tôi.
<NativeBaseProvider>
<ScrollView height={850}>
<FlatList
data={newsData}
renderItem={({ item }) => (
<View>
</View>
)}
keyExtractor={(item) => item.id}
/>
</ScrollView>
</NativeBaseProvider>
FlatList có một chỗ dựa dữ liệu, đó là newsData của chúng tôi nói rằng chúng tôi đã tạo trước đó và nó trả về một item từ renderItems .
Điều này tương tự với map trong JavaScript, đi qua một mảng và trả về một mục. Nó cũng có keyExtractor mà chúng tôi sử dụng để làm cho mỗi mặt hàng là duy nhất.
Bây giờ, hãy hiển thị dữ liệu của chúng tôi trong Chế độ xem.
Tạo thêm một chế độ xem bên trong chế độ xem chính như thế này:
<NativeBaseProvider>
<ScrollView height={850}>
<FlatList
data={newsData}
renderItem={({ item }) => (
<View>
<View>
</View>
</View>
)}
keyExtractor={(item) => item.id}
/>
</ScrollView>
</NativeBaseProvider>Bây giờ, hãy thêm một số văn bản bên trong chế độ xem con.
<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>Điều này chứa tiêu đề tin tức của chúng tôi, mô tả và ngày xuất bản.
Cách tạo kiểu cho ứng dụng React Native News của chúng tôi
Đây là giao diện ứng dụng của chúng tôi bây giờ, với tiêu đề tin tức, mô tả và ngày tháng. Để làm cho nó trông đẹp hơn một chút, chúng ta cần tạo kiểu cho nó.
Nhập StyleSheet từ React Native ở trên cùng để sử dụng kiểu của nó.
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>Sau đó, thêm các kiểu như thế này. Và ở dưới cùng, chúng ta cần tạo các kiểu đó.
const styles = StyleSheet.create({
newsContainer: {
padding: 10
},
title: {
fontSize: 18,
marginTop: 10,
fontWeight: "600"
},
newsDescription: {
fontSize: 16,
marginTop: 10
},
date: {
fontSize: 14
},
});
Đây là giao diện của ứng dụng bây giờ sau khi có một số kiểu dáng. Bạn cũng có thể cuộn xuống trang.
Bây giờ, chúng tôi cần thay đổi định dạng ngày thành định dạng có thể đọc được vì tôi không hiểu '2021-08-21T11:00:40Z'.
Chúng tôi sẽ sử dụng gói moment.js hữu ích cho việc đó, vì vậy hãy cài đặt nó bằng lệnh bên dưới:
npm install moment --saveSau đó, nhập nó vào màn hình All.js của chúng tôi:
<Text style={styles.date}>
{moment(item.publishedAt).format('LLL')}
</Text>Định dạng ngày như sau:
Tài liệu thời điểm cung cấp cho chúng tôi rất nhiều định dạng để lựa chọn. Tôi đã chọn 'LLL' định dạng.
Và giờ đây, ngày tháng của chúng ta dễ đọc hơn nhiều.
Chúng ta cũng cần một dải phân cách để tách các bài báo ra khỏi nhau để chúng không chạy cùng nhau.
<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>Vì vậy, sau khi thêm một dải phân cách sau chế độ xem con, ứng dụng của chúng tôi trông giống như sau:
Bây giờ các tiêu đề tin tức của chúng tôi được phân chia trông rất tuyệt.
API Tin tức này cũng có một hình ảnh. Vì vậy, hãy thêm nó.
<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>
Vì vậy, chúng tôi đã thêm hình ảnh và chúng tôi sử dụng khóa có tên là urlToImage để làm điều này .
Bây giờ chúng tôi có hình ảnh tin tức hiển thị.
Cách Thêm Spinner để Hiển thị Tải tin tức
Hãy thêm một vòng quay sẽ hiển thị khi tin tức đang tải.
Đầu tiên, chúng tôi sẽ tạo một séc. Nếu newsData độ dài của trạng thái lớn hơn một, chúng tôi sẽ hiển thị FlatList của chúng tôi , chứa dữ liệu tin tức của chúng tôi. Nếu không, chúng tôi sẽ hiển thị vòng quay tải.
Nói cách khác, nếu newsData độ dài của trạng thái nhỏ hơn một, điều đó có nghĩa là nó trống và API vẫn đang được gọi. Khi lệnh gọi API kết thúc, nó sẽ lưu trữ dữ liệu vào newsData và độ dài của tiểu bang sẽ thay đổi thành nhiều hơn một.
{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>
)}Và trong các kiểu của chúng tôi, hãy thêm mã kiểu dưới đây cho spinner.
spinner: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 400
}Đây là đoạn mã dưới đây để bạn tham khảo:
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
}
});Màn hình All.js của chúng tôi hiện đã hoàn tất.
Và bây giờ, chúng ta cũng có thể sử dụng cùng một mã trong tất cả các màn hình khác. Chúng tôi chỉ cần thay đổi tham số mà chúng tôi đang truyền trong các dịch vụ trong useEffect Móc.
Vì vậy, đối với màn hình Business, chúng ta sẽ sử dụng business. Đối với Sức khỏe, chúng tôi sẽ sử dụng sức khỏe, v.v.
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
}
});
Cuộn xuống Màn hình Doanh nghiệp và bạn sẽ thấy tin tức liên quan đến Doanh nghiệp.
Và bạn có thể làm tương tự cho tất cả các màn hình khác:
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)
})
}, [])Kết luận
Xin chúc mừng! Bây giờ ứng dụng tin tức của chúng tôi đã hoàn tất.
Vì vậy, hãy tiếp tục, xây dựng và thử nghiệm với nó một chút. Có rất nhiều điều bạn có thể làm.
Bạn có thể xem danh sách phát của tôi trên Xây dựng ứng dụng tin tức bằng React Native và Native Base, trên kênh YouTube của tôi.
Vui lòng tải xuống mã tại đây:https://github.com/nishant-666/React-Native-News
Chúc bạn học vui vẻ.