Added missing examples for TouchableHighlight and TouchableWithoutFeedback (#30364)
Summary: Added example for the following missing props in TouchableHighlight * onHideUnderlay * onShowUnderlay **Motivation** - Missing examples for these props in the RNTester app ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Added] - Added example to ToucableHighlight Pull Request resolved: https://github.com/facebook/react-native/pull/30364 Test Plan: * Tested on an Android device ![under_2](https://user-images.githubusercontent.com/26821140/98783116-0a47dd00-241f-11eb-95a1-feffb5c8a00b.png) ![under_1](https://user-images.githubusercontent.com/26821140/98783118-0c11a080-241f-11eb-907a-498cdfceee13.png) ![Screenshot_1605441612](https://user-images.githubusercontent.com/26821140/99184542-946aab00-2769-11eb-847c-e5f71ff5093a.png) Reviewed By: TheSavior Differential Revision: D25563070 Pulled By: rickhanlonii fbshipit-source-id: c8a10601cda28f4884e1444039a208d0b70cbdf1
This commit is contained in:
Родитель
2aeb6545bc
Коммит
b64ffd70cd
|
@ -479,6 +479,105 @@ const remoteImage = {
|
||||||
uri: 'https://www.facebook.com/favicon.ico',
|
uri: 'https://www.facebook.com/favicon.ico',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const TouchableHighlightUnderlayMethods = () => {
|
||||||
|
const [underlayVisible, setUnderlayVisible] = useState(
|
||||||
|
'Underlay not visible',
|
||||||
|
);
|
||||||
|
|
||||||
|
const hiddenUnderlay = () => {
|
||||||
|
setUnderlayVisible('Press to make underlay visible');
|
||||||
|
};
|
||||||
|
|
||||||
|
const shownUnderlay = () => {
|
||||||
|
setUnderlayVisible('Underlay visible');
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<TouchableHighlight
|
||||||
|
style={styles.logBox}
|
||||||
|
underlayColor={'#eee'}
|
||||||
|
onShowUnderlay={shownUnderlay}
|
||||||
|
onHideUnderlay={hiddenUnderlay}
|
||||||
|
onPress={() => {
|
||||||
|
console.log('TouchableHighlight underlay shown!');
|
||||||
|
}}>
|
||||||
|
<Text style={styles.textBlock}>{underlayVisible}</Text>
|
||||||
|
</TouchableHighlight>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TouchableTouchSoundDisabled = () => {
|
||||||
|
const [soundEnabled, setSoundEnabled] = useState(false);
|
||||||
|
const toggleTouchableSound = () => {
|
||||||
|
soundEnabled ? setSoundEnabled(false) : setSoundEnabled(true);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{Platform.OS === 'android' ? (
|
||||||
|
<>
|
||||||
|
<TouchableWithoutFeedback
|
||||||
|
touchSoundDisabled={soundEnabled}
|
||||||
|
onPress={() => console.log('touchSoundDisabled pressed!')}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
padding: 10,
|
||||||
|
}}>
|
||||||
|
Touchables make a sound on Android, which can be turned off.
|
||||||
|
</Text>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
onPress={toggleTouchableSound}
|
||||||
|
touchSoundDisabled={soundEnabled}>
|
||||||
|
<Text style={styles.button}>
|
||||||
|
{soundEnabled
|
||||||
|
? 'Disable Touchable Sound'
|
||||||
|
: 'Enable Touchable Sound'}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function TouchableOnFocus<T: React.AbstractComponent<any, any>>() {
|
||||||
|
const ref = useRef<?React.ElementRef<T> | {focus: Function}>(null);
|
||||||
|
const [isFocused, setIsFocused] = useState(false);
|
||||||
|
const [focusStatus, setFocusStatus] = useState(
|
||||||
|
'This touchable is not focused.',
|
||||||
|
);
|
||||||
|
const [isBlurred, setIsBlurred] = useState(
|
||||||
|
'This item still has focus, onBlur is not called',
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleFocus = () => {
|
||||||
|
isFocused
|
||||||
|
? setFocusStatus('This touchable is focused')
|
||||||
|
: setIsFocused('This touchable is not focused') &&
|
||||||
|
setIsBlurred('This item has lost focus, onBlur called');
|
||||||
|
};
|
||||||
|
const focusTouchable = () => {
|
||||||
|
if (ref.current) {
|
||||||
|
ref.current.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableHighlight
|
||||||
|
ref={ref}
|
||||||
|
onFocus={toggleFocus}
|
||||||
|
onPress={focusTouchable}>
|
||||||
|
<Text>
|
||||||
|
{focusStatus}
|
||||||
|
{'\n'}
|
||||||
|
{isBlurred}
|
||||||
|
</Text>
|
||||||
|
</TouchableHighlight>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
row: {
|
row: {
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
|
@ -603,6 +702,24 @@ exports.examples = [
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'TouchableHighlight Underlay Visibility',
|
||||||
|
render: function(): React.Node {
|
||||||
|
return <TouchableHighlightUnderlayMethods />;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Touchable Touch Sound',
|
||||||
|
render: function(): React.Node {
|
||||||
|
return <TouchableTouchSoundDisabled />;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Touchable onFocus',
|
||||||
|
render: function(): React.Node {
|
||||||
|
return <TouchableOnFocus />;
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '<Text onPress={fn}> with highlight',
|
title: '<Text onPress={fn}> with highlight',
|
||||||
render: function(): React.Element<any> {
|
render: function(): React.Element<any> {
|
||||||
|
|
Загрузка…
Ссылка в новой задаче