Add disabled TouchableNativeFeedback button example

Summary:Follow-up PR for #5931: Adding missing `TouchableNativeFeedback` example.

**Test plan**

- Run UIExplorer on iOS and Android devices

[Android]
- Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles.

[iOS]
- Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there

**Code formatting**

This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

cc mkonicek
Closes https://github.com/facebook/react-native/pull/6123

Differential Revision: D2971021

fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
This commit is contained in:
Kureev Alexey 2016-02-24 05:25:51 -08:00 committed by facebook-github-bot-6
parent 21ee7fde6e
commit b4992efca9
1 changed files with 33 additions and 0 deletions

View File

@ -24,6 +24,8 @@ var {
TouchableHighlight,
TouchableOpacity,
UIManager,
Platform,
TouchableNativeFeedback,
View,
} = React;
@ -333,6 +335,33 @@ var TouchableDisabled = React.createClass({
Disabled TouchableHighlight
</Text>
</TouchableHighlight>
{Platform.OS === 'android' &&
<TouchableNativeFeedback
style={[styles.row, styles.block]}
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
<View>
<Text style={[styles.button, styles.nativeFeedbackButton]}>
Enabled TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
}
{Platform.OS === 'android' &&
<TouchableNativeFeedback
disabled={true}
style={[styles.row, styles.block]}
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
<View>
<Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
Disabled TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
}
</View>
);
}
@ -366,6 +395,10 @@ var styles = StyleSheet.create({
color: '#007AFF',
opacity: 0.5,
},
nativeFeedbackButton: {
textAlign: 'center',
margin: 10,
},
hitSlopButton: {
color: 'white',
},