[TOC]

概述

移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。

显示一个简单的按钮

Button是一个简单的跨平台的按钮组件。下面是一个最简示例：

1
2
3
4
5
6
<Button
  onPress={() => {
    Alert.alert("你点击了按钮！");
  }}
  title="点我！"
/>

上面这段代码会在 iOS 上渲染一个蓝色的标签状按钮，在 Android 上则会渲染一个蓝色圆角矩形带白字的按钮。点击这个按钮会调用”onPress”函数，具体作用就是显示一个 alert 弹出框。你还可以指定”color”属性来修改按钮的颜色。

再试试下面这个使用Button的例子吧。你可以点击”Tap to Play”来预览真实效果。（下面会显示一个嵌在网页中的手机模拟器，国内用户可能打不开这个网页模拟器，或速度非常慢）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
 * 移动应用上的用户交互基本靠“摸”。
 * 当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。
 * React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 
 * 以及可用于识别更复杂的手势的完整的手势响应系统。
 */
import React, { Component } from 'react';
// 从“react-native” 导入以下这些控件
import { Platform, StyleSheet, TextInput, View, Image, Button, Alert } from 'react-native';


/**
 * 默认导出的组件
 */
export default class DemoButtonApp extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      // 属性字段为styles.container
      <View style={styles.container}>

        {/* 增加一个Button View */}
        <View
          style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Click Me"
          />
        </View>
        {/* 增加一个不同的颜色的Button View */}
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>


        {/* 增加一个竖直方向方向的Button View */}
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>


          {/* 增加一个水平方向的Button View */}
          <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    //flexDirection: 'row',   // 设置控件排列方向，为按行排列。也就是横向排列
    flexDirection: 'column',   // 设置控件排列方向，为按列排列。也就是竖向排列(默认也是竖向排列)
    flex: 1,

    // flex-start  表示在靠近主轴的起始段
    justifyContent: 'center',
    // alignItems: 'center',   // 沿次轴方向居中对齐
    // backgroundColor: '#C5FCFF',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',  // 设置控件排列方向，为按行排列。也就是横向排列
    justifyContent: 'space-between'  // child在主轴方向相邻child等间距对齐，首尾child与父容器对齐
  }
});