💈

ReactNative StyleSheet

2024/03/20に公開

React Native

TypeScript

tech

📕Overview

https://reactnative.dev/docs/stylesheet
A StyleSheet is an abstraction similar to CSS StyleSheets

スタイルシートは CSS スタイルシートに似た抽象化です。

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

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#eaeaea',
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

export default App;

コード品質に関するヒント:

スタイルを render 関数から遠ざけることで、コードが理解しやすくなります。
スタイルに名前を付けることは、render 関数の下位レベルのコンポーネントに意味を追加する良い方法です。

🧷summary

CSSに似たUIにスタイルをつけて見た目を整えてくれる仕組みがReactNativeにはあります。公式のサンプルコードだと、背景色を変えたり、Viewを枠で囲んだり、TextのFontを設定しています。

StyleSheetを適用したいコンポーネントごとに作成することもできるし、プロパティを複数作って、View用とText用を作成することもできます。練習ならこの方がわかりやすそうです。

StyleSheetを適用したいコンポーネントの中に、style={}と書いて、この中にstyles.プロパティ名を書くと、フォントのサイズを変更したりとUIのレイアウトを変更することができます。

今回だと、Viewに対して、CSSのFlexBoxのようなスタイルと背景色、Textに対してフォントの色とサイズを適用したサンプルを作ってみました。

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hi icchysan!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  // Viewに適用するスタイル
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  // Textに適用するスタイル
  text: {
    color: "red",
    fontSize: 20,
    fontFamily: "Arial",
  },
});

🧑‍🎓thoughts

今回は、ReactNativeで、StyleコンポーネントのようなCSSのような、レイアウトを整える機能を使ってみました。CSSとは異なるスタイルのプロパティのようですが、同じような名前なのでおそらくCSSの知識があれば使いこなせるのではと思いました。

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion