React Native의 학습:구성 요소 [button]

React Native 표준 구성 요소의 사용 방법을 살펴보겠습니다.
우선 button 구성 요소로 보십시오.

운영 환경

Mac: MacBook Air
macOS 10.13.1 (High Sierra)
Xcode 9.2
node.js: v6.11.5
react-native-cli: 2.0.1
react: 16.0.0
react-native: 0.51.0

버튼 코드 붙여넣기

react-native init my app에서 만든 코드에 공식 문서에 붙인 코드를 실행합니다.

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

export default class App extends Component<{}> {
  onPressLearnMore() {
    Alert.alert('ボタンを押しました！')
  }
  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.onPressLearnMore}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

아날로그 실행 결과

"Learn More"를 클릭하십시오.

대체로 움직이다.
다만, 버튼 같지 않아요.ios의 경우 색을 지정하면 텍스트의 색을 설정하고android의 경우 배경색만 설정하는 것 같습니다.
그리하여상자에 배경색을 설정합니다. 살짝 단추처럼 보십시오.

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

export default class App extends Component<{}> {
  _onPressButton() {
    Alert.alert('ボタンを押しました！')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="start"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="stop"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  buttonContainer: {
    height: 100,
    width: 200,
    padding: 10,
    backgroundColor: '#FFFFFF',
    margin: 3
  },
});

버튼 같기도 하고.

Touchable Opacity 버튼의 구현

Touchable Opacity에서도 같은 일을 할 수 있어서 해봤어요.
borderradius를 같이 설정하고 각을 둥글게 보세요.

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

export default class App extends Component<{}> {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._onPressButton} style={styles.button}>
           <Text>start</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._onPressButton} style={styles.button}>
           <Text>end</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  button: {
    width: 250,
    height: 100,
    padding: 10,
    borderRadius: 10,
    backgroundColor: 'lightgray',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 3
  },
});

실행 결과

다 됐습니다.
표준 구성 요소가 좀 부족한 것 같습니다.
나는 언제 react-native-elements에 도전하고 싶다.

참조 페이지