天候アプリケーションの作成-レイアウトの設定

構成部品のスタイルが追加されるので、スタイルシートがインポートされreactive-nativeから
StatusBarはExpose-status-barからインポートしましょう
入力して、自動完了でどこを使用するかを選択できます.自動完了は、パッケージ名の末尾に単語を削除し、入力すると自動的に完了します.

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}>
      <StatusBar style="dark"></StatusBar>
      <View style={styles.city}>
        <Text style={styles.cityName}>Daegu</Text>
      </View>
      <View style={styles.weather}>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>

          <Text style={styles.description}>Sunny</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "rgb(214,230,245)" },
  city: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: { fontSize: 68, fontWeight: "bold" },
  weather: {
    flex: 3,
  },
  day: {
    flex: 1,
    alignItems: "center",
    // backgroundColor: "rgb(239, 255, 253)",
  },
  temp: {
    marginTop: 50,
    fontSize: 140,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

CSS
backgroundColorを各ビューに配置すると、レイアウトが容易に理解できます.そのため、作りやすくなりました.


justifyContent(水平位置合わせ)「センター」
テーマの位置合わせ(垂直位置合わせ)[センター]
fontSize
フォントの厚さに関するトピック
margintop(上スペース):負の値を与えることもできます.
このような考えがあるはずです.真ん中に並べ替えるよりも、margineにあげたほうがいいです.
fontWeightに関する話題
https://github.com/facebook/react-native/issues/26193
アンドロイドシステムでは、「100」から「900」の方式は変化せず、代わりに「bold」/「normal」である.

いつもstyles~CSSを使用する習慣を保つ(エラーを減らす)

Alt+Clickは複数の変数を同時に表示できます.(オプション)