【動画】ReactNativeでスマホアプリ作ろう/第5回おさらいしながら天気予報機能を追加する

どーもロックシステムアカデミーのろっくんです！ReactNativeを使ってスマホアプリを作ろうシリーズもいよいよ大詰めだよ。
前回の動画でタップで画面遷移ができるようになって、ニュース機能が完成したね！

ニュースアプリを作るのが目的だったからもう完成じゃないのー？

そうだね、今回はこれまでのおさらいも兼ねてアプリに天気が見れる機能をつけようと思うんだ！
その他にアプリのアイコンを設定したり、タブで画面を切り替える機能をつけるからチャレンジしてみてね！

これまでの学習を振り返りながら実装しているから是非真似してみてね。

ロックシステムアカデミー！ゆっくりプログラミング学習

大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です！「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます！ チャンネル登録よろしくお願いします！ プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/

https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A

・参照したサイトリンク、完成コードは以下からお使いください！

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { FontAwesome } from "@expo/vector-icons";
import NewsScreen from "./screens/NewsScreen";
import DetailScreen from "./screens/DetailScreen";
import WeatherScreen from "./screens/WeatherScreen";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const NewsStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ニュース" component={NewsScreen} />
      <Stack.Screen name="詳細ページ" component={DetailScreen} />
    </Stack.Navigator>
  );
};

const WeatherStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="天気予報" component={WeatherScreen} />
    </Stack.Navigator>
  );
};

const screenOption = ({ route }) => ({
  tabBarIcon: ({ color, size }) => {
    let iconName;
    if (route.name === "ニュース") {
      iconName = "newspaper-o";
    } else if (route.name === "天気予報") {
      iconName = "sun-o";
    }

    // You can return any component that you like here!
    return <FontAwesome name={iconName} size={size} color={color} />;
  },
});

export default App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={screenOption}>
        <Tab.Screen name="ニュース" component={NewsStack} />
        <Tab.Screen name="天気予報" component={WeatherStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <View style={styles.moziBox}>
          <Text style={styles.text}>大阪</Text>
        </View>

        <View style={styles.gazoBox}>
          <Image
            style={{ width: 70, height: 70 }}
            source={{ url: "https://picsum.photos/id/599/200/300" }}
            s
          />
          <Text style={styles.subText}>くもり</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },

  box: {
    height: 100,
    width: "100%",
    borderColor: "lightblue",
    borderWidth: 1,
    flexDirection: "row",
  },

  moziBox: {
    width: 250,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
  },

  gazoBox: {
    flex: 1,
    padding: 15,
    justifyContent: "center",
  },

  text: {
    fontSize: 17,
  },

  subText: {
    fontSize: 14,
    color: "darkblue",
    paddingLeft: 15,
  },
});

今回はファイルだけ作成。

次回ReactNativeシリーズ最後だよ！最後までがんばろー！

ロックシステムアカデミー！ゆっくりプログラミング学習

大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です！「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます！ チャンネル登録よろしくお願いします！ プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/

https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A