[React native] Button

Button

코드

<Button
  title="버튼 내부 출력 텍스트"
  onPress={() => 클릭시 출력되는 함수}
/>

title 속성과 onPress 속성은 반드시 기입

예제 1

버튼 출력 텍스트와 클릭시 호출되는 함수만 지정

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

const App = () => (
  <SafeAreaView>
    <View>
      <Button
        title="Test 1"
        onPress={() => Alert.alert('Button pressed')}
      />
    </View>    
  </SafeAreaView>
);

export default App;

실행결과

클릭시

예제 2

버튼에 색깔 지정

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

const App = () => (
  <SafeAreaView>
    <View>
      <Button
        title="Test 2"
        //버튼에 색깔 지정
        color="#f194ff"
        onPress={() => Alert.alert('Button pressed')}
      />
    </View>    
  </SafeAreaView>
);

export default App;

실행결과

예제 3

버튼 비활성화
disabled가 ture시 버튼 비활성화

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

const App = () => {

  return (
  <SafeAreaView>
    <View>
      <Button
        title="Test 3"
        //버튼에 색깔 지정
        color="#f194ff"
        //버튼 비활성화
        disabled
        onPress={() => Alert.alert('Button pressed')}
      />
    </View>    
  </SafeAreaView>
  )
};

export default App;

실행결과