先日「React Hooksでニュースアプリを作ってみる」という記事をあげましたが、今回はその記事で作ったコードを流用してReact Native(Expo)を使ってモバイルアプリを作りました(今回もReduxは使わずHooksのみでグローバルステート管理しています)。
モバイルアプリ用に見た目は少し変えましたが、機能は全く同じです。
なお前回はnode-sassパッケージを使ってCSSスタイリングを行いましたが、今回はstyled-componentsパッケージを使っています。
今回もGitHubにソースコードをアップしていますのでよかったらご利用ください。
GitHub
React Native w/ Hooksで作ったモバイルニュースアプリ. Contribute to ganeo/ex…
アプリの外観
※ 「後で読む記事」の登録はストレージには保存していないので、アプリを閉じると登録は消えます。
利用したパッケージ
赤字は追加して入れる必要があるパッケージ
“@react-native-community/masked-view”: “0.1.6”,
“@react-navigation/bottom-tabs”: “^5.5.0”,
“@react-navigation/material-top-tabs”: “^5.2.8”,
“@react-navigation/native”: “^5.4.3”,
“@react-navigation/stack”: “^5.4.0”,
“axios”: “^0.19.2”,
“expo”: “~37.0.3”,
“react”: “~16.9.0”,
“react-dom”: “~16.9.0”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz”,
“react-native-gesture-handler”: “~1.6.0”,
“react-native-reanimated”: “~1.7.0”,
“react-native-safe-area-context”: “0.7.3”,
“react-native-screens”: “~2.2.0”,
“react-native-tab-view”: “^2.14.2”,
“react-native-web”: “~0.11.7”,
“react-native-webview”: “8.1.1”,
“styled-components”: “^5.1.1”
ローカル環境で稼働させる際の留意事項
ニュースアプリは無料でも利用できる「News API」というAPIサービスを利用しています。
GitHubからソースコードをダウンロードしてローカル環境で動かす場合は、News APIにサインアップしてAPIキーを取得する必要があります。
APIキーを取得したら「screens/HomeScreen.js」ファイルのAPI変数にAPIキーを設定してください。