React Native常用组件-点击组件-原创手记-慕课网

Button

用于接收用户点击行为，并触发相应的操作。
常用的属性：

title：设置按钮上显示的文字
disabled：设置按钮是否可以点击

常用的事件：

onPress：设置按钮的点击事件

例子：

import React from 'react';
import { Button, Alert } from 'react-native';

const Example = () => (
  <Button
    title="点击我"
    onPress={() => Alert.alert('按钮被点击')}
  />
);

export default Example;

RN中Button可以使用的属性比较少，并且没有style属性，因此我们通常在Button外层包裹View组件。

TouchableOpacity

一个基于不透明度的触摸容器，按下时会降低透明度，以示交互。
常用的属性：

activeOpacity：设置TouchableOpacity激活时，以多少不透明度显示（0 到 1 之间，默认值为 0.2），数值越小越透明
disabled：设置TouchableOpacity是否可以点击

常用的事件：

onPress：设置TouchableOpacity的点击事件

例子：

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

const Example = () => (
  <TouchableOpacity
    activeOpacity={1}
    onPress={() => console.log('区域被点击')}
    style={{ padding: 10, backgroundColor: '#DDDDDD' }}
  >
    <Text>点击我</Text>
  </TouchableOpacity>
);

export default Example;

TouchableHighlight

与TouchableOpacity类似，当按下TouchableHighlight的时候，透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
常用的属性：

activeOpacity：设置TouchableHighlight激活时，以多少不透明度显示（0 到 1 之间，默认值为 0.85），数值越小越透明
underlayColor：设置按下时显示出来的底层颜色
disabled：设置TouchableOpacity是否可以点击

常用的事件：

onPress：设置TouchableOpacity的点击事件

例子：

import React from 'react';
import { TouchableHighlight, Text } from 'react-native';

const Example = () => (
  <TouchableHighlight
    activeOpacity={0.2}
    underlayColor="#fff"
    onPress={() => console.log('区域被点击')}
  >
    <Text>点击我</Text>
  </TouchableHighlight>
);

export default Example;

TouchableWithoutFeedback

最基本的触摸组件，在按下的时候，没有任何视觉上的反馈，也不能设置style。
常用的事件：

onPress：设置TouchableWithoutFeedback的点击事件

例子：

import React from 'react';
import { TouchableHighlight, Text } from 'react-native';

const Example = () => (
  <TouchableWithoutFeedback
    onPress={() => console.log('区域被点击')}
  >
    <Text>点击我</Text>
  </TouchableWithoutFeedback>
);

export default Example;