mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-28 20:34:52 +08:00
6f3e29f630
Problem: Although 'Touchable' supports basic keyboard usage, it doesn't support delays or interaction via the Space key. Solution: Extend the 'Touchable' mixin to better support keyboard interactions. All touchable callbacks and delays are now supported when interacted with via a keyboard's Enter and Space keys (as would be expected of native 'button' elements). However, events are not normalized to mimic touch events. Minor upstream changes to the Touchables in React Native are also included.
133 lines
2.8 KiB
JavaScript
133 lines
2.8 KiB
JavaScript
/**
|
|
* @flow
|
|
*/
|
|
|
|
/*
|
|
import React from 'react';
|
|
import UIExplorer, { PropText } from '../../ui-explorer';
|
|
import { action, storiesOf } from '@kadira/storybook';
|
|
import {
|
|
Image,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableHighlight,
|
|
TouchableOpacity,
|
|
Platform,
|
|
TouchableNativeFeedback,
|
|
View
|
|
} from 'react-native';
|
|
|
|
const heartImage = { uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small' };
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
justifyContent: 'center',
|
|
flexDirection: 'row'
|
|
},
|
|
icon: {
|
|
width: 24,
|
|
height: 24
|
|
},
|
|
image: {
|
|
width: 50,
|
|
height: 50
|
|
},
|
|
text: {
|
|
fontSize: 16
|
|
},
|
|
block: {
|
|
padding: 10
|
|
},
|
|
button: {
|
|
color: '#007AFF'
|
|
},
|
|
disabledButton: {
|
|
color: '#007AFF',
|
|
opacity: 0.5
|
|
},
|
|
nativeFeedbackButton: {
|
|
textAlign: 'center',
|
|
margin: 10
|
|
},
|
|
hitSlopButton: {
|
|
color: 'white'
|
|
},
|
|
wrapper: {
|
|
borderRadius: 8
|
|
},
|
|
wrapperCustom: {
|
|
borderRadius: 8,
|
|
padding: 6
|
|
},
|
|
hitSlopWrapper: {
|
|
backgroundColor: 'red',
|
|
marginVertical: 30
|
|
},
|
|
logBox: {
|
|
padding: 20,
|
|
margin: 10,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#f0f0f0',
|
|
backgroundColor: '#f9f9f9'
|
|
},
|
|
eventLogBox: {
|
|
padding: 10,
|
|
margin: 10,
|
|
height: 120,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#f0f0f0',
|
|
backgroundColor: '#f9f9f9'
|
|
},
|
|
forceTouchBox: {
|
|
padding: 10,
|
|
margin: 10,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#f0f0f0',
|
|
backgroundColor: '#f9f9f9',
|
|
alignItems: 'center'
|
|
},
|
|
textBlock: {
|
|
fontWeight: '500',
|
|
color: 'blue'
|
|
}
|
|
});
|
|
|
|
const examples = [
|
|
{
|
|
title: '<TouchableHighlight>',
|
|
description:
|
|
'TouchableHighlight works by adding an extra view with a ' +
|
|
'black background under the single child view. This works best when the ' +
|
|
'child view is fully opaque, although it can be made to work as a simple ' +
|
|
'background color change as well with the activeOpacity and ' +
|
|
'underlayColor props.',
|
|
render() {
|
|
return (
|
|
<View>
|
|
<View style={styles.row}>
|
|
<TouchableHighlight
|
|
onPress={() => console.log('stock THW image - highlight')}
|
|
style={styles.wrapper}
|
|
>
|
|
<Image source={heartImage} style={styles.image} />
|
|
</TouchableHighlight>
|
|
<TouchableHighlight
|
|
activeOpacity={1}
|
|
onPress={() => console.log('custom THW text - highlight')}
|
|
style={styles.wrapper}
|
|
underlayColor="rgb(210, 230, 255)"
|
|
>
|
|
<View style={styles.wrapperCustom}>
|
|
<Text style={styles.text}>
|
|
Tap Here For Custom Highlight!
|
|
</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
},
|
|
];
|
|
*/
|