React Native と Native Base を使用して Android ニュースアプリを作成する方法

私たちは物事が絶えず変化する世界に住んでいます。したがって、何が起こっているかを最新の状態に保ちたい場合は、優れたニュースアプリが必要になります.

クールな技術を学び、最新の状態を保つために、このブログ投稿では、React Native を使用して Android 用のニュースアプリケーションを作成します。さまざまなニュースチャンネルから見出しを取得し、カテゴリ別に表示します。

React Native と Native Base を使用して Android ニュースアプリを作成する方法

完了すると、アプリは次のようになります。それでは早速見ていきましょう。

Expo のインストール方法

では、万博とは？ Expo は、React Native アプリをすばやく簡単に構築してデプロイするのに役立つフレームワークです。

インストールしましょう。

npm install --global expo-cli

Expo のインストール

ターミナルでこのコマンドを実行して、Expo CLI をインストールします。ここでは --global を使用していますどこにでもインストールできるようにします。

インストールしたら、Expo プロジェクトを作成する必要があります。

expo init News-Application

Expo プロジェクトの作成

上記のコマンドを使用して、プロジェクトを初期化します。アプリケーションの名前、プロジェクトに TypeScript を追加するか、空のプロジェクトから開始するかなど、いくつかの質問が表示されます。空白を選択して、Enter キーを押してください。

次に、フォルダー内のすべてのパッケージと依存関係をダウンロードします。

完了したら、プロジェクトフォルダーに移動します。アプリケーションを開始するには、expo start と入力します .ブラウザで開発者ツールが開きます。

Expo 開発者ツール

ここでは、Android デバイス/エミュレーターで実行するか、iOS シミュレーターで実行するかなど、左側に多くのオプションが表示されます。アプリケーションを Web ブラウザーで実行するので、[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 リファレンス、ナビゲーター、下部タブの順に選択します。

下のタブを選択

以下のコマンドを使用して下部タブをインストールしましょう:

npm install @react-navigation/bottom-tabs

下部タブの取り付け

ここで、App.js ファイルで、Bottom Tabs を使用するためにインポートする必要があります。

したがって、次のようにインポートします:

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。また、各画面のプロジェクトに 1 つのコンポーネントを作成します。

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

画面のコード

これが出力になります:

All、Business、Health、Sports、Tech という 5 つの画面

All、Business、Health、Sports、Tech の 5 つの画面があります。

ここで、いくつかの調整を行います。下部のタブのアイコンを変更する必要があります.

そのためには、アイコンのアイコンライブラリを取得する必要があります。そのために、react-native-elements を使用します。

インストールするには、以下のコマンドを入力してください:

npm install react-native-elements

React Native Elements をインストールする

このアイコンパッケージには、選択できる多数のアイコンオプションがあります。

React Native Elements で利用可能なアイコン

次に、Bottom Tab Navigator にアイコンを追加しましょう。

<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 の呼び出し方法

それでは、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 状態に応答を格納します。一般的なカテゴリのパラメータも渡します。

この画面はすべてのニュースを取得するため、一般的なカテゴリを使用します。 1画面おきに変わります。健康健康画面の場合、スポーツ スポーツ用など。

ここで、このデータをインターフェースに表示する必要があります。そのためには、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 は newsData である data prop を取ります前に作成した状態であり、item を返します renderItems から .

これは map に似ています JavaScript では、配列をトラバースして項目を返します。 keyExtractor もあります各アイテムをユニークにするために使用します。

それでは、ビューにデータを表示しましょう。

次のように、親ビュー内にもう 1 つのビューを作成します。

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

react-native から StyleSheet をインポートする

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

仕切りを追加する

したがって、子ビューの後に仕切りを追加すると、アプリは次のようになります:

ニュースの見出しが分割され、見栄えが良くなりました。

このニュース 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 の場合状態の長さが 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 でフック。

というわけで、ビジネス画面はビジネスを使います。 Health には health などを使用します。

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 a News Application using React Native と Native Base のプレイリストをご覧ください。

こちらからコードを自由にダウンロードしてください:https://github.com/nishant-666/React-Native-News

楽しい学習。

Kotlin と Jetpack Compose を使用して Android アプリを作成する

GitHub アクションを使用して Android アプリ開発を自動化する方法

電話で Web アプリを作成する方法 – Python &Pydroid Android アプリチュートリアル
やあ、元気？私は 18 歳のバックエンド開発者であり、意欲的な機械学習エンジニアです。この記事では、Python を使用して携帯電話で Web アプリを作成する方法について書いていきます 😁.掘り下げてみましょう。要件ここで最初に必要なのは、少なくともバージョン 6.0 以降の Android スマートフォンです。しかし、それで十分だと言ったらどうしますか？話がうますぎる。次に行う必要があるのは、pydroid3 というモバイルアプリケーションを電話にインストールすることです。ご覧のとおり、pydroid3 は携帯電話で Python を記述できるモバイルアプリケ
Android に Edge をインストールして使用する方法
Microsoft の Edge には、既定のブラウザーを快適に使用できるようにする機能が満載です。現在は廃止された Internet Explorer の使用に勝るものはありません。そして、あなたがファンなら、Edge エクスペリエンスをスマートフォンに持ち込むのは良い考えかもしれません.この記事では、まさにそれを見ていきます。最初に、Android に Edge ブラウザーをインストールする方法について説明し、次に Edge ブラウザーを最大限に活用する方法について説明します。それでは始めましょう。 Android に Edge をインストールする方法 Google、Facebo

React Native と Native Base を使用して Android ニュース アプリを作成する方法

Expo のインストール方法

React Navigation を使用してさまざまな画面を作成する方法

ニュース API の呼び出し方法

React Native News アプリのスタイルを設定する方法

スピナーを追加してニュースの読み込みを表示する方法

結論

React Native と Native Base を使用して Android ニュースアプリを作成する方法