mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
105 lines
2.4 KiB
Markdown
105 lines
2.4 KiB
Markdown
# Touchable
|
||
|
||
A wrapper for making views respond to mouse, keyboard, and touch presses. On
|
||
press in, the touchable area can display a highlight color, and the opacity of
|
||
the wrapped view can be decreased.
|
||
|
||
This component combines the various `Touchable*` components from React Native.
|
||
|
||
Unsupported React Native props:
|
||
`accessibilityComponentType` (android) – use `accessibilityRole`,
|
||
`accessibilityTraits` (ios) – use `accessibilityRole`,
|
||
`onHideUnderlay` – use `onPressOut`,
|
||
`onShowUnderlay` – use `onPressIn`,
|
||
`underlayColor` – use `activeUnderlayColor`
|
||
|
||
## Props
|
||
|
||
**accessibilityLabel**: string
|
||
|
||
Overrides the text that's read by the screen reader when the user interacts
|
||
with the element.
|
||
|
||
(web) **accessibilityRole**: oneOf(roles)
|
||
|
||
Allows assistive technologies to present and support interaction with the view
|
||
in a manner that is consistent with user expectations for similar views of that
|
||
type. For example, marking a touchable view with an `accessibilityRole` of
|
||
`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
|
||
|
||
Note: Avoid changing `accessibilityRole` values over time or after user
|
||
actions. Generally, accessibility APIs do not provide a means of notifying
|
||
assistive technologies of a `role` value change.
|
||
|
||
**accessible**: bool = true
|
||
|
||
When `false`, the view is hidden from screenreaders.
|
||
|
||
**activeOpacity**: number = 1
|
||
|
||
Sets the opacity of the child view when `onPressIn` is called. The opacity is
|
||
reset when `onPressOut` is called.
|
||
|
||
(web) **activeUnderlayColor**: string = 'transparent'
|
||
|
||
Sets the color of the background highlight when `onPressIn` is called. The
|
||
highlight is removed when `onPressOut` is called.
|
||
|
||
**children**: element
|
||
|
||
A single child element.
|
||
|
||
**delayLongPress**: number = 1000
|
||
|
||
Delay in ms, from `onPressIn`, before `onLongPress` is called.
|
||
|
||
**delayPressIn**: number = 0
|
||
|
||
(TODO)
|
||
|
||
Delay in ms, from the start of the touch, before `onPressIn` is called.
|
||
|
||
**delayPressOut**: number = 0
|
||
|
||
(TODO)
|
||
|
||
Delay in ms, from the release of the touch, before `onPressOut` is called.
|
||
|
||
**onLayout**: function
|
||
|
||
(TODO)
|
||
|
||
**onLongPress**: function
|
||
|
||
**onPress**: function
|
||
|
||
**onPressIn**: function
|
||
|
||
**onPressOut**: function
|
||
|
||
**style**: style
|
||
|
||
[View](View.md) style
|
||
|
||
## Examples
|
||
|
||
```js
|
||
import React, { Touchable } from 'react-native-web'
|
||
|
||
const { Component, PropTypes } = React;
|
||
|
||
class Example extends Component {
|
||
static propTypes = {
|
||
}
|
||
|
||
static defaultProps = {
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<Touchable />
|
||
)
|
||
}
|
||
}
|
||
```
|