ReactNative Button

📕Overview

https://reactnative.dev/docs/button

どのプラットフォームでも適切にレンダリングされる基本的なボタン コンポーネント。 最小限のカスタマイズをサポートします。

このボタンがアプリに適さない場合は、Pressable を使用して独自のボタンを作成できます。 インスピレーションを得るためには、Button コンポーネントのソース コードを見てください。

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

🧷summary

今回は、ReactNativeでButtonコンポーネントを使って、ボタンを作ってみましょう!
ボタンを押すと、Dialogが表示されます。iOSでビルドすると、cupatinoデザインになるようですね。ReactNativeって、Flutterみたいにマテリアルデザインって決まってる訳ではなく、Swift、Kotlin独特のUIになるようです。

今回は、Aleartというコンポーネントを使ってボタンをタップすると、Dialogを出す機能を作ってみました。

import React from 'react';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Alert,
} from 'react-native';


export default function ButtonExample() {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.fixToText}>
            <Button
                title="up!"
                onPress={() => Alert.alert('上だよ!')}
            />
            <Button
                title="down!"
                onPress={() => Alert.alert('下だよ!')}
            />
            </View>
        </SafeAreaView>
        )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      marginHorizontal: 16,
    },
    fixToText: {
      flexDirection: 'column',
      justifyContent: 'space-between',
    },
  });

App.tsxでimportしてビルドする。

import React from "react";
import ButtonExample from "./components/ButtonExample";

export default function App() {
  return (
    <ButtonExample />
  )
}

🧑‍🎓thoughts

今回は、Buttonコンポーネントを使ってボタンをタップするとDialogを出すサンプルアプリを作ってみました。HTMLのbuttonタグと異なるので、まだまだReactとの違いに慣れないですが、こんな技術もあるんだな〜と思いつつキャッチアップしてみようと思います。