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',
|
||||
};
|
||||
|
||||
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({
|
||||
row: {
|
||||
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',
|
||||
render: function(): React.Element<any> {
|
||||
|
|
Загрузка…
Ссылка в новой задаче