react-native之Button组件

环境：

react-native 0.57
iphone X模拟器测试

一、官方示例代码及效果图(Button)

1. 官方示例代码

import React, {
  Component
} from 'react'
import {
  View,Button
} from 'react-native'
export default class App extends Component {
  onPressLearnMore = ()=>{
    alert('学习Button')
  }
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Button
          onPress={this.onPressLearnMore}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    )
  }
}

2. 效果图

效果图

二、Props

onPress

用户点击此按钮时所调用的处理函数

类型	必填
function	是

---

title

按钮内显示的文本

类型	必填
string	是

---

accessibilityLabel

用于给残障人士显示的文本（比如读屏应用可能会读取这一内容）

类型	必填
string	否

---

color

文本的颜色(iOS)，或是按钮的背景色(Android)

类型	必填
color	否

---

disabled

设置为 true 时此按钮将不可点击。

类型	必填
bool	否

---

testID

用来在端到端测试中定位此视图。

类型	必填
string	否

---

hasTVPreferredFocus

(仅Apple TV) TV 优先获得焦点 (看View组件).

类型	必填	平台
bool	否	iOS

三、进入Button里面看看官方的代码

export interface ButtonProps {
    title: string;
    onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
    color?: string;
    accessibilityLabel?: string;
    disabled?: boolean;

    /**
     * Used to locate this button in end-to-end tests.
     */
    testID?: string;
}

export class Button extends React.Component<ButtonProps> {}

从这段代码，我们可以知道属于它自己的只有6个属性。

四、使用Text组件封装一个类似Button的组件

组件作用：
这个组件跟Button组件基本上是相同的，之所以我选择封装这个组件是因为安卓与IOS的Button不同，比如说color属性，在安卓上是背景颜色，而在IOS上是字体的颜色。
组件代码：

import React,{Component} from 'react'
import {Text,TouchableOpacity} from 'react-native'
import PropTypes from 'prop-types'
let goldenRatio = 0.618//黄金比例
export default class MyButton extends Component {
    static defaultProps = {
        bgColor:'#000',
        fColor:'#fff',
        size:10
    };
    static propTypes = {
        //文本的样式
        style:PropTypes.object,
        //背景颜色
        bgColor:PropTypes.string,
        //字体颜色
        fColor:PropTypes.string,
        //文本
        text:PropTypes.string.isRequired,
        //按钮事件
        onPress:PropTypes.func.isRequired,
        //用于给残障人士显示的文本
        accessibilityLabel:PropTypes.string,
        //大小，这个大小不是指按钮的大小，而是padding的大小
        size:PropTypes.number
    }
    render(){
        let {style,bgColor,fColor,text,accessibilityLabel,size} = this.props
        let w = size*goldenRatio
        let h = size - w
        return (
            <TouchableOpacity onPress={this.props.onPress}>
                <Text style={{
                    paddingHorizontal:w,
                    paddingVertical:h,
                    borderRadius:5,
                    shadowRadius:10,
                    shadowOpacity:1,
                    shadowOffset:{width:-5,height:5},
                    shadowColor:'#999',
                    fontWeight:'bold',
                    backgroundColor:bgColor,
                    color:fColor,
                    ...style}}
                    accessibilityLabel={accessibilityLabel}
                    >{text}</Text>
            </TouchableOpacity>
        )
    }
}

测试代码：

import React, {
  Component
} from 'react'
import {
  View
} from 'react-native'
import MyButtom from './component/MyButton'

export default class App extends Component {
  onPressLearnMore = ()=>{
    alert('学习Button')
  }
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <MyButtom
        text={'你好'}
        onPress={this.onPressLearnMore}
        style={{borderRadius:10}}
        size={20}
         />
      </View>
    )
  }
}

效果图：

组件效果图