React Native组件之Button
2017-05-13 10:50
225 查看
不管在Android还是ios开发中,系统都有Button组件,而在早期的React Native中,系统是不提供Button组件的,一般会使用一个叫做react-native-button的库。
accessibilityLabel是用于盲文的,读屏器软件可能会读取这一内容(
colorios表示字体的颜色,android表示背景的颜色
disabled是否可用,如果为true,禁用此组件的所有交互
onPress点击触发函数
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显示的文本accessibilityLabel是用于盲文的,读屏器软件可能会读取这一内容(
colorios表示字体的颜色,android表示背景的颜色
disabled是否可用,如果为true,禁用此组件的所有交互
onPress点击触发函数
实例
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> ); } }
相关文章推荐
- react-native组件Button封装与传值
- react-native 侧滑组件 react-native-swipe-list-view
- RN(react native)入坑指南-10,组件的生命周期
- [React Native混合开发]React Native for iOS之动手写组件
- ReactNative组件的生命周期
- 自定义crosswalk为react-native组件是出现Fatal signal 11 (SIGSEGV) at 0x0000003c (code=1)的问题
- ReactNative-Navigator组件简单使用
- React—native 之 Navigator (导航路由)组件
- React native从入门到深入 ---页面传值,父子组件传值
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- React Native常用第三方组件汇总
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- React-Native ListView加载图片淡入淡出效果的组件
- React Native日历日程组件
- ReactNative 图片列表组件
- ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏
- React-Native-ListView、ListViewItem(子、父组件互相传值)
- React Native 中组件的生命周期
- react-native自定义对话框弹出框组件dialogs
- React Native 自定义圆角button的封装