[React Native] React Native Component - 5. Button

 

---

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 5. Button

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 6. ScrollView

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 7. TextInput

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 8. Button, ScrollView, TextInput 심화

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 9. Picker

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 10. Slider

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 11. ActivityIndicator

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 12. Image

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 13. Modal

---

 

---

5. Button

ios 와 안드로이드 간의 기본 버튼이 다르기 때문에 실행 화면이 다르게 나타난다.

 

만들어 둔 버튼을 눌렀을 때 난수를 생성하는 프로그램을 만들어 보자. (Button + TouchEvent 심화)

 

numlist.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

const NumList = props => {
  return props.num.map((item, idx) => (
    <TouchableOpacity
      style={styles.numList}
      key={idx}
      onPress={() => {
        props.delete(idx);
      }}>
      <Text>{item}</Text>
    </TouchableOpacity>
  ));
};

const styles = StyleSheet.create({
  numList: {
    backgroundColor: '#cccccc',
    alignItems: 'center',
    padding: 5,
    width: '100%',
    marginTop: 5,
  },
});

export default NumList;

 

header.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

const Header = props => (
  <TouchableOpacity
    style={styles.header}
    // onPress={() => alert('hello world')}
    // onLongPress={() => alert('hello world')}
    // onPressIn={() => alert('hello world')}
    onPressOut={() => alert('hello world')}>
    <View>
      <Text>{props.name}</Text>
    </View>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'pink',
    alignItems: 'center',
    padding: 5,
    width: '100%',
  },
});

export default Header;

 

generator.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

const Generator = props => {
  return (
    <View style={styles.generator}>
      <Button
        title="Add Number"
        onPress={() => {
          props.add();
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  generator: {
    backgroundColor: '#D197CF',
    alignItems: 'center',
    padding: 5,
    width: '100%',
  },
});

export default Generator;

 

title - 버튼 텍스트

onPress - 버튼을 눌렀을 때 발생할 이벤트

 

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Header from './src/header';
import Generator from './src/generator';
import NumList from './src/numlist';

class App extends Component {
  state = {
    appName: 'My First App',
    random: [36, 999],
  };

  onAddRandomNum = () => {
    const randomNum = Math.floor(Math.random() * 100) + 1;
    this.setState(prevState => {
      return {
        random: [...prevState.random, randomNum],
      };
    });
  };

  onNumDelete = position => {
    const newArray = this.state.random.filter((num, index) => {
      return position !== index;
    });
    this.setState({
      random: newArray,
    });
  };

  render() {
    return (
      <View style={styles.mainView}>
        <Header name={this.state.appName} />
        <View>
          <Text
            style={styles.mainText}
            onPress={() => alert('text touch event')}>
            Hello World
          </Text>
        </View>
        <Generator add={this.onAddRandomNum} />
        <NumList num={this.state.random} delete={this.onNumDelete} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    backgroundColor: 'white',
    flex: 1,
    paddingTop: 50,
    alignItems: 'center',
    // justifyContent: 'center',
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
  },
});

export default App;

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의