[1週間]簡単なカウンターを作る

18378 ワード
react native テキストリンク

に質問



👉 構造はこうですApp.jsxには、MinusButton.jsxとPlusButton.jsxの2つのボタンがあります.もちろん、componentsフォルダにコンポーネントを作成して読み込みますよね?
App.jsxはcountというステータス値を管理し、ステータス値を変更できる関数があります.Minus関数とPlus関数です.
この2つの関数を各構成部品に渡し、ボタン構成部品を押すと、アプリケーションも使用されます.jsxのcountステータスを変更する例.
上に表示されたflexを使用して画面を装飾し、ステータス管理、コンポーネント、プロパティを練習します.
  • 反応を学ぶなら一度は体現しておきたい有名な例です…!

    • 💡 コード#コード#


    📌 App.jsx
    import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PlusButton from './components/PlusButton';
import MinusButton from './components/MinusButton';

export default function App() {
  const [state, setState] = useState(0);

  const Minus = () => {
    setState(state - 1);
  };

  const Plus = () => {
    setState(state + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>카운터 : {state}</Text>
      <View style={styles.buttonContainer}>
        <PlusButton Plus={Plus} />
        <MinusButton Minus={Minus} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  counter: {
    fontSize: 20,
  },
  buttonContainer: {
    flexDirection: 'row',
    marginTop: 30,
  },
});
  • プラスボタンとマイナスボタンを構成部品として、import
    • を作成
  • const [state, setState] = useState(0);👉 初期状態値0は、変数stateの
    • に入れる.
  • ステータス値変更関数setState
  • 属性(Plus、Minus)をそれぞれタグ付け(PlusButton、MinusButton)
    👉 関数を構成部品
    • に渡す
    📌PlusButton.jsx
    import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

export default function PlusButton({ Plus }) {
  return (
    <TouchableOpacity onPress={Plus} style={styles.container}>
      <Text style={styles.plusText}> Plus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'yellow',
    width: 50,
    height: 50,
  },
  plusText: {
    marginTop: 15,
  },
});
  • export default function PlusButton({ Plus })👉 PlusButtonから必要な非構造化割当属性(Plus)のみを抽出し、
    • を使用する.
    📌 MinusButton.jsx
    import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

export default function MinusButton({ Minus }) {
  return (
    <TouchableOpacity onPress={Minus} style={styles.container}>
      <Text style={styles.minusText}> Minus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'green',
    width: 50,
    height: 50,
  },
  minusText: {
    marginTop: 15,
  },
});
  • export default function MinusButton({ Minus })👉 MinusButtonから必要な非構造化割当属性(Minus)のみを抽出し、
    • を使用する.
    JAVAレポート神器DynamicReports
    TIL 33 REACT-Hookを使用するルール