우리는 끊임없이 변화하는 세상에 살고 있습니다. 따라서 무슨 일이 일어나고 있는지 최신 정보를 얻고 싶다면 좋은 뉴스 앱이 필요할 것입니다.
멋진 기술을 배우고 최신 상태를 유지하는 데 도움이 되도록 이 블로그 게시물에서는 React Native를 사용하여 Android용 뉴스 애플리케이션을 빌드합니다. 다양한 뉴스 채널에서 헤드라인을 가져와 카테고리별로 표시합니다.
이것이 완료되면 앱이 어떻게 보일 것입니다. 그럼 바로 바로 들어가 보겠습니다.
엑스포 설치 방법
그렇다면 엑스포는 무엇일까요? Expo는 React Native 앱을 빠르고 쉽게 빌드하고 배포하는 데 도움이 되는 프레임워크입니다.
설치해 보겠습니다.
npm install --global expo-cli
터미널에서 이 명령을 실행하여 Expo CLI를 설치합니다. 여기에서는 --global을 사용하고 있습니다. 모든 곳에 설치되도록 합니다.
설치가 완료되면 Expo 프로젝트를 생성해야 합니다.
expo init News-Application위의 명령을 사용하여 프로젝트를 초기화합니다. 프로젝트에 TypeScript를 추가할지, 아니면 빈 프로젝트로 시작할지, 애플리케이션 이름과 같은 몇 가지 질문을 합니다. 공백을 선택하고 Enter 키를 누르기만 하면 됩니다.
그런 다음 폴더의 모든 패키지와 종속성을 다운로드합니다.
이제 완료되면 프로젝트 폴더로 이동합니다. 애플리케이션을 시작하려면 expo start를 입력하세요. . 브라우저에서 개발자 도구가 열립니다.
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 파일입니다.
이제 애플리케이션이 실행 중입니다.
React Navigation을 사용하여 다른 화면을 만드는 방법
이제 애플리케이션을 위한 다양한 화면을 만들어 보겠습니다. 이를 위해 React Navigation을 사용할 것입니다. 자, 설치해 봅시다.
https://reactnavigation.org/로 이동하여 문서 읽기를 클릭합니다. 문서 페이지가 열립니다.
아래 명령어를 사용하여 React Navigation을 설치해 봅시다.
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context이제 React Navigation이 설치되었습니다.
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>
);
} 그리고 이것은 우리의 출력이 될 것입니다:
여기에는 모두, 비즈니스, 건강, 스포츠 및 기술에 대한 5개의 화면이 있습니다.
이제 여기에서 몇 가지 조정을 해 보겠습니다. 하단 탭의 아이콘을 변경해야 합니다.
그렇게 하려면 아이콘에 대한 아이콘 라이브러리를 가져와야 합니다. 이를 위해 우리는 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} />
),
}} />여기에 홈 페이지에 대한 "home"이라는 아이콘과 유형에 대한 페더 아이콘 클래스를 추가했습니다.
이렇게 하면 위의 출력이 생성됩니다. 그리고 마찬가지로, 그들 모두에 대해 동일한 과정을 반복합시다.
<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 호출 방법
이제 https://newsapi.org/
에서 News API를 호출해 보겠습니다.
이 웹 사이트로 이동하여 가입하십시오. API 키를 제공합니다.
모든 뉴스 상수를 저장하려면 구성 파일이 필요하므로 생성해 보겠습니다.
export const API_KEY = ``;
export const endpoint = `https://newsapi.org/v2/top-headlines`;
export const country = 'in'API_KEY, 엔드포인트 및 국가 코드가 필요합니다.
이제 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 후크에서 서비스를 호출합니다. 그런 다음 배열인 newsData 상태에 응답을 저장합니다. 또한 일반적인 범주에 대한 매개변수를 전달합니다.
이 화면은 모든 뉴스를 가져오므로 일반 카테고리를 사용합니다. 다른 모든 화면에 대해 변경됩니다. 건강 이 될 것입니다. 건강 화면의 경우 스포츠 스포츠 등.
이제 이 데이터를 인터페이스에 표시해야 합니다. 그리고 이를 위해서는 Native Base라는 또 다른 패키지가 필요합니다. 자, 설치해 봅시다.
Native Base를 설치하려면 아래 명령을 입력하십시오.
yarn add native-base styled-components styled-system
expo install react-native-svg react-native-safe-area-contextAll.js에서 Native Base에서 몇 가지를 가져와 보겠습니다.
import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native';
import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base';
import { services } from '../services/services';
그런 다음 반환에 NativeBaseProvider을 추가합니다. .
return (
<NativeBaseProvider>
</NativeBaseProvider>
)그런 다음 스크롤 뷰를 추가해 보겠습니다. 이렇게 하면 뉴스 데이터가 화면 높이를 초과하는 경우 사용자가 스크롤할 수 있습니다.
<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과 유사합니다. 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>여기에는 뉴스 헤드라인 제목, 설명 및 게시 날짜가 포함됩니다.
리액트 네이티브 뉴스 앱 스타일 지정 방법
이것이 뉴스 제목, 설명 및 날짜가 포함된 앱의 모습입니다. 좀 더 멋지게 보이려면 스타일을 지정해야 합니다.
StyleSheet 가져오기 스타일을 사용하려면 맨 위에 있는 React Native에서.
import { View, Text, StyleSheet } from 'react-native';<View>
<View style={styles.newsContainer}>
<Text style={styles.title}>
{item.title}
</Text>
<Text style={styles.date}>
{item.publishedAt}
</Text>
<Text style={styles.newsDescription}>
{item.description}
</Text>
</View>
</View>그런 다음 이와 같은 스타일을 추가합니다. 그리고 맨 아래에 이러한 스타일을 만들어야 합니다.
const styles = StyleSheet.create({
newsContainer: {
padding: 10
},
title: {
fontSize: 18,
marginTop: 10,
fontWeight: "600"
},
newsDescription: {
fontSize: 16,
marginTop: 10
},
date: {
fontSize: 14
},
});
이것은 스타일을 얻은 후 응용 프로그램이 어떻게 보이는지입니다. 페이지를 아래로 스크롤할 수도 있습니다.
이제 날짜 형식을 읽을 수 있는 형식으로 변경해야 합니다. '2021-08-21T11:00:40Z'를 이해하지 못하기 때문입니다.
이를 위해 유용한 moment.js 패키지를 사용할 것이므로 아래 명령을 사용하여 설치해 보겠습니다.
npm install moment --save그런 다음 All.js 화면에서 가져옵니다.
<Text style={styles.date}>
{moment(item.publishedAt).format('LLL')}
</Text>다음과 같이 날짜 형식을 지정합니다.
순간 문서는 우리에게 선택할 수 있는 많은 형식을 제공합니다. '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인 경우 state의 길이가 하나 이상인 경우 FlatList가 표시됩니다. , 뉴스 데이터가 포함되어 있습니다. 그렇지 않으면 로딩 스피너가 표시됩니다.
즉, newsData 상태의 길이가 1보다 작으면 비어 있고 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)
})
}, [])결론
축하합니다! 이제 뉴스 신청이 완료되었습니다.
그러니 계속해서 빌드하고 약간 실험해 보세요. 할 수 있는 일이 많습니다.
내 YouTube 채널에 있는 Build News Application using React Native 및 Native Base에서 내 재생 목록을 확인할 수 있습니다.
여기에서 코드를 자유롭게 다운로드할 수 있습니다:https://github.com/nishant-666/React-Native-News
행복한 학습