App10ButtonBasics.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import React from 'react';
  2. import {
  3. Alert,
  4. Button,
  5. StyleSheet,
  6. View,
  7. } from 'react-native';
  8. const styles = StyleSheet.create({
  9. container: {
  10. flex: 1,
  11. },
  12. buttonContainer: {
  13. margin: 20,
  14. },
  15. alternativeLayoutButtonContainer: {
  16. margin: 20,
  17. flexDirection: 'row',
  18. justifyContent: 'space-between',
  19. },
  20. });
  21. class ButtonBasics extends React.Component {
  22. onPressButton() {
  23. Alert.alert('You pressed THE button');
  24. }
  25. render() {
  26. return (
  27. <View style={styles.container}>
  28. <View style={styles.buttonContainer}>
  29. <Button onPress={this.onPressButton}
  30. title="Press me"
  31. />
  32. <Button onPress={this.onPressButton}
  33. title="Press me"
  34. color="#841584"
  35. />
  36. </View>
  37. <View style={styles.alternativeLayoutButtonContainer}>
  38. <Button onPress={this.onPressButton}
  39. title="This looks great!"
  40. />
  41. <Button onPress={this.onPressButton}
  42. title="OK"
  43. color="#841584"
  44. />
  45. </View>
  46. </View>
  47. );
  48. }
  49. }
  50. export default ButtonBasics;