Clearer code in Button.js
Summary: Thanks for submitting a PR! Please read these instructions carefully: - [x] Explain the **motivation** for making this change. - [x] Provide a **test plan** demonstrating that the code is solid. - [x] Match the **code formatting** of the rest of the codebase. - [x] Target the `master` branch, NOT a "stable" branch. What existing problem does the pull request solve? * Combined repeating `if` checks for clearer logic. * `defaultBlue` is inlined because it is only used once for each OS. - Updated the `Button.js` file in an existing project and all buttons behave exactly the same. Here is a simple demo: ![](http://i.makeagif.com/media/6-11-2017/B0Bhry.gif) - There is no change in the underlying logic of the code. Closes https://github.com/facebook/react-native/pull/14455 Differential Revision: D5330112 Pulled By: hramos fbshipit-source-id: 7fd1a0609f0bb2123208d0e1b3da2bc779f9583d
This commit is contained in:
Родитель
14538aa038
Коммит
7ee051db28
|
@ -97,25 +97,25 @@ class Button extends React.Component {
|
|||
} = this.props;
|
||||
const buttonStyles = [styles.button];
|
||||
const textStyles = [styles.text];
|
||||
const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
|
||||
if (color && Platform.OS === 'ios') {
|
||||
textStyles.push({color: color});
|
||||
} else if (color) {
|
||||
buttonStyles.push({backgroundColor: color});
|
||||
if (color) {
|
||||
if (Platform.OS === 'ios') {
|
||||
textStyles.push({color: color});
|
||||
} else {
|
||||
buttonStyles.push({backgroundColor: color});
|
||||
}
|
||||
}
|
||||
const accessibilityTraits = ['button'];
|
||||
if (disabled) {
|
||||
buttonStyles.push(styles.buttonDisabled);
|
||||
textStyles.push(styles.textDisabled);
|
||||
accessibilityTraits.push('disabled');
|
||||
}
|
||||
invariant(
|
||||
typeof title === 'string',
|
||||
'The title prop of a Button must be a string',
|
||||
);
|
||||
const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title;
|
||||
const accessibilityTraits = ['button'];
|
||||
if (disabled) {
|
||||
accessibilityTraits.push('disabled');
|
||||
}
|
||||
const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
|
||||
return (
|
||||
<Touchable
|
||||
accessibilityComponentType="button"
|
||||
|
@ -132,32 +132,27 @@ class Button extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
// Material design blue from https://material.google.com/style/color.html#color-color-palette
|
||||
let defaultBlue = '#2196F3';
|
||||
if (Platform.OS === 'ios') {
|
||||
// Measured default tintColor from iOS 10
|
||||
defaultBlue = '#007AFF';
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: Platform.select({
|
||||
ios: {},
|
||||
android: {
|
||||
elevation: 4,
|
||||
backgroundColor: defaultBlue,
|
||||
// Material design blue from https://material.google.com/style/color.html#color-color-palette
|
||||
backgroundColor: '#2196F3',
|
||||
borderRadius: 2,
|
||||
},
|
||||
}),
|
||||
text: Platform.select({
|
||||
ios: {
|
||||
color: defaultBlue,
|
||||
// iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
|
||||
color: '#007AFF',
|
||||
textAlign: 'center',
|
||||
padding: 8,
|
||||
fontSize: 18,
|
||||
},
|
||||
android: {
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
padding: 8,
|
||||
fontWeight: '500',
|
||||
},
|
||||
|
|
Загрузка…
Ссылка в новой задаче