13. React-Native Button, StatusBar

1. Button

React Native에서 버튼 컴포넌트를 만들어주는 키워드이다.

—Example

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

const Separator = () => (
  <View style={styles.separator} />
);


const App = () => (
  <SafeAreaView style={styles.container}>
    <View>
      <Text style={styles.title}>
      The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
      </Text>
      <Button
        //버튼의 타이틀을 정의하는 속성
        title="Press Me"
        //클릭시 어떤 함수를 실행할건지
        onPress={() => Alert.alert("Simple Button pressed")}
      />
    </View>
    <Separator/>
    <View>
      <Text style={styles.title}>
      Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
      </Text>
        <Button
          title="Press Me"
          //컬러 지정가능
          color="#f194ff"
          onPress={()=> Alert.alert("Button with adjected color pressed")}
        />
    </View>
    <Separator/>
    <View>
      <Text style={styles.title}>
        All interaction for the component are disabled.
      </Text>
      <Button
        title="Press me"
        //버튼 비활성화 속성
        disabled
        onPress={()=> Alert.alert('Cannot press this one')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        This layout strategy lets the title define the width of the button.
      </Text>
      <View style={styles.fixToText}>
        <Button
          title="Left button"
          onPress={() => Alert.alert('Left button pressed')}
        />
        <Button
          title='Right button'
          onPress={()=> Alert.alert('Right button pressed')}
        />
      </View>
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  }
});

export default App;

→ 버튼을 클릭하면 알림메세지가 나오는 코드이다.

→ 함수 컴포넌트안에 컴포넌트만 존재하면 return 키워드 없이 전체 함수를 {}가 아닌 ()로 감싸면 된다.

—Button Props

• onPress : 해당 버튼을 클릭하면 어떤 함수를 실행할지 정의하는 속성이다.

• title : 버튼의 이름을 정의하는 속성이다.

• color : 버튼의 색상을 지정하는 속성이다.

• disabled : true이면 버튼 비활성화, false이면 버튼 활성화(default : false)

---

2. StatusBar

디바이스 상단에 있는 상태 바의 속성을 변경해주는 컴포넌트이다.

—Example

import React, {useState} from 'react';
import {Button, Text, StyleSheet, StatusBar, View, SafeAreaView} from 'react-native';

const App = () => {
  //StatusBar의 barStyle 속성이 들어있는 배열 생성
  const styleTypes = ['default', 'dark-content', 'light-content'];
  //hidden 속성을 변경할때마다 리렌더링하기 위한 useState() Hook
  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
  //barStyle 속성을 변경할때마다 리렌더링하기 위한 useState() Hook
  const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);

  const changeVisibilityStatusBar = () => {
    setVisibleStatusBar(!visibleStatusBar);
  }

  const changeStyleStatusBar = () => {
    const styleId = styleTypes.indexOf(styleStatusBar) + 1;
    //배열의 길이랑 같으면 인덱스를 0으로 초기화
    if (styleId === styleTypes.length) {
      return setStyleStatusBar(styleTypes[0])
    }
    return setStyleStatusBar(styleTypes[styleId])
  }

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
        <Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible' : 'Hidden'}</Text>
      </View>
      <StatusBar backgroundColor='blue' barStyle={styleStatusBar} />
      <View>
        <StatusBar hidden={visibleStatusBar}/>
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
      </View>
    </SafeAreaView>
  )
}
  

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1'
  },
  buttonContainer: {
    padding: 10
  },
  textStyle: {
    textAlign: 'center'
  }
});

export default App;

→ 버튼을 누르면 StatusBar style이 변경되는 코드이다.

—StatusBar Props

• animated : 속성값이 변할 때 애니메이션을 줄지 여부를 정의하는 속성

• backgroundColor : 배경 생상을 지정하는 속성

• barStyle : barStyle을 지정해주는 속성('default', 'light-content', 'dark-content')

  — default : 일반 : dark-content, 다크모드 : light-content

  — light-content : 흰색 으로 상태바가 보여짐

  — dark-content : 검정색으로 상태바가 보여짐

—Methods

1. setBackgroundColor()

static setBackgroundColor( color : string, [animated] : boolean)

statusBar의 색상을 설정하는 함수이다.

color : 지정색 설정, animated : 애니메이션을 줄껀지 결정

2. setBarStyle()

static setBarStyle(style : StatusBarStyle, [animated] : boolean)

StatusBar의 barStyle을 결정해주는 함수이다.

style : [default, light-content, dark-content] 중 하나 설정

animated : 애니매이션을 줄껀지 결정

3. setHidden()

static setHidden(hidden : boolean, [animated] : boolean)

StatusBar을 표시할껀지 안표시할껀지 결정하는 함수

Uploaded by Notion2Tistory v1.1.0