React Native 3日目

10269 ワード

#2.0 Displaying Temperature

apiが価格を受け取ったときに表示されるページを作成する.

現在受け取っているダイヤルは華氏度、摂氏度にするならapi URLに&waを付けてunits=metric

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

export default function Weather({temp}){
    return  <View style={styles.container}>
                <Text>{temp}</Text>
            </View>
    ;
};

Weather.propTypes = {
    temp: PropTypes.number.isRequired  
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent: "center",
        alignItems: "center"
    }
});

#2.1 Getting the Condition Name

天候に応じて、名称、ID、アイコンが設定されているか否かを判断することができる.

https://openweathermap.org/weather-conditions

Weather.propTypes = {
    temp: PropTypes.number.isRequired,
    condition: PropTypes.oneOf([
        "Thunderstorm",
        "Drizzle",
        "Rain",
        "Snow",
        "Atmosphere",
        "Clear",
        "Clouds",
        "Haze",
        "Mist",
        "Dust"
    ]).isRequired  
}

#2.2 Icons and Styling

import { 종류 } from '@expo/vector-icons';

<종류 name="이름" />

万博アイコン使用ガイド

多種iconの種類によって、違う輸入でOKです.

例)

import { Feather } from '@expo/vector-icons';

<Feather name="sun" />

#2.3 Background Gradient

直線-勾配バックグラウンドランプ使用

expo install expo-linear-gradient

import { LinearGradient } from 'expo-linear-gradient';

一番上のコンテナとして使用する.

statusBarはライトモードまたはダークモードにインポートして変更できます.

export default function Weather({temp, condition}){
    return  <LinearGradient 
                colors={weatherOptions[condition].gradient}
                style={styles.container}>
                <StatusBar barStyle="light-content" />
                <View style={styles.halfcontainer}>
                    <Ionicons name={weatherOptions[condition].iconName} size={90} color="white" />
                    <Text style={styles.temp}>{temp}, {condition}</Text>
                </View>
                <View style={styles.halfcontainer}>

                </View>
            </LinearGradient>
    ;
};

#2.4 Titles and Subtitles

title、字幕を付け、cssを付けて終了.

Reference

この問題について(React Native 3日目), 我々は、より多くの情報をここで見つけました https://velog.io/@pjoon357/React-Native-3일차

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Nest.JS

C言語7