React Native组件之Button
发布时间:2020-12-15 07:20:43 所属栏目:百科 来源:网络整理
导读:不管在Android还是ios开发中,系统都有Button组件,而在早期的React Native中,系统是不提供Button组件的,一般会使用一个叫做react-native-button的库。 Button组件 Button组件其实就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封装
不管在Android还是ios开发中,系统都有Button组件,而在早期的React Native中,系统是不提供Button组件的,一般会使用一个叫做react-native-button的库。 Button组件Button组件其实就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封装。核心源码如下: render() {
const {
accessibilityLabel,color,onPress,title,disabled,} = 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 (disabled) {
buttonStyles.push(styles.buttonDisabled);
textStyles.push(styles.textDisabled);
}
invariant(
typeof title === 'string','The title prop of a Button must be a string',);
const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title;
return (
<Touchable
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={['button']}
disabled={disabled}
onPress={onPress}>
<View style={buttonStyles}>
<Text style={textStyles}>{formattedTitle}</Text>
</View>
</Touchable>
);
}
Button常用属性titleButton显示的文本 实例import React,{Component} from 'react';
import {
StyleSheet,View,Button,ToastAndroid,} from 'react-native';
export default class ButtonDemo extends Component {
render() {
return (
<View style={{flex:1}}>
<Button title='默认Button' accessibilityLabel='accessibilityLabel'/>
<Button title='color设置为红色' color='red' />
<Button title='禁用' disabled={true} onPress={()=>{
ToastAndroid.show('点我了');
}}/>
<Button title='禁用' onPress={()=>{
ToastAndroid.show('点我了',ToastAndroid.SHORT);
}}/>
</View>
);
}
}
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |