React_Native (1)

18663 ワード
react native android iOS テキストリンク
😁 React NativeはFacebookが開発したオープンソースモバイルアプリケーションフレームワークです.
📌 何が反応と違うの?
1.View:htmlのdivと同じ役割です.
2.flex:1->親コンテナで、すべてのスペースが使用可能です.
3.flex:1 flex:2->敷地面積は1:2です.
4.widthやheightと比較してflexを使う👍
🔴 簡単なコード例で理解

💻 App.jsコード

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}>
      <View style = {styles.yellowView}/>
      <View style = {styles.blueView}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  yellowView:{
    flex:1,
    backgroundColor:"yellow"
  },
  blueView: {
    flex:1,
    backgroundColor:"blue"
  }
});
😀 コードの説明
1.コンテナビューには、yelloとblue Viewの2つのサブビューが含まれます.
2.YelloViewとBlueViewのflexは1と1であり、両者の空間が1:1であることを意味する.
3.Viewはhtmlのdivを表します.
🔴 Loadingウィンドウの作成

💻 Loading.jsコード

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

export default function Loading(){
    return <View style={styles.container}>
        <Text style ={styles.text}>Getting the fucking weather</Text>
    </View>
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:"flex-end", //content의 내용을 밑단으로 내림.
        paddingHorizontal:30,
        paddingVertical : 150,
        backgroundColor:"#FDF6AA"
    },
    text:{
        color:"#2c2c2c",
        fontSize: 20
    }
});
😀 コードの説明
  • Loading function
  • Viewの親コンテナにテキストの子を配置します.
  • styles
  • justifyContent : "flew-end":contentをダウングレードします.
  • paddingHorizontal:30, paddingVertical : 150 :縦と横の充填空間を数値に設定します.
  • fontSize : 20orfonrSize:"20px"は、このように記入する必要があります.
    • 🔴 Expo APIから場所を取得します.
  • terminalからexpo install expo-locationlocation APIをインストールします.
  • function->クラス

    • 💻 App.jsコード

    export default class extends React.Component {
  getLocation = async() =>{
    const location = await Location.getCurrentPositionAsync();
    console.log(location);
  }
  componentDidMount(){
    this.getLocation();
  }
  render(){
    return <Loading />;
  }
}
    😀 コードの説明
  • Location.getCurrentPositionAsyncはawait関数で、async()関数で作成されます.
  • componentDidMount()にはgetLocation関数が含まれています.
    • 🔴 ユーザ位置情報を検証して位置を受信します.

    💻 App.jsコード

    export default class extends React.Component {
  state = {
    isLoading: true
  }
  getLocation = async() =>{
    try{
      await Location.requestPermissionsAsync();
      const {coords : {latitude, longtinude}} = await Location.getCurrentPositionAsync();
      //send to API and get weather!
      this.setState({isLoading:false})
    }catch(error){
      Alert.alert("Can't find you.", "so sad");
    }
  }
  componentDidMount(){
    this.getLocation();
  }
  render(){
    const {isLoading } = this.state;
    return isLoading? <Loading /> : null;
  }
}
    😀 コードの説明
  • getLocation関数は、インポート先の関数です.
  • ただし、場所をインポートするには、ユーザーの場所情報を受け入れる必要があります.
  • try catch文のlocation.requestPermissionAsync()を使用して、ユーザーの同意を受け入れます.
  • 同意しない場合、catch文でerror Alertがキャプチャされ、発行されます.
  • const {coords:{latitude,longtitude}} = await Location.getCurrentPositionAsync()緯度と経度をインポートします.
  • isLoadingはデータをインポートする時間があるため、trueのデフォルト値からすべてのデータをインポートするとすぐにfalseにジャンプします.2つのbool値に基づいてLoadingウィンドウを出力するかどうか.
    • 🔴 緯度と経度で天気をもたらす

    💻 App.jsコード

    import axios from "axios";
import * as Location from "expo-location";

const API_KEY = "d6ee5391a7da7b3a908bb7093fd3fa0d";

export default class extends React.Component {
  ...
  getWeather = async(latitude, longitude) =>{
    const {data} = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
      );
      console.log(data);
  };
    😀 コードの説明
  • openweather.ioからAPI KEYをインポートします.
  • getWeather非同期関数はaxiosを介してAPIにインポートされる.
  • ``に、長さ、緯度、api keyを入れます.
    • <出典:ノマドエンコーダ>
    Axiosインスタンスの作成
    Bevyのデフォルトプラグインを理解する