React native之路（八）Button

2019年5月22日 177次阅读 来源: Knight_Davion

Button-按钮，平时开发中再熟悉不过的东西了，为什么单独一篇来学，因为在我以往的开发经验当中某些看似简单的东西实际应用起来并不简单，要完成某一种效果需要很多方面的知识。今天就来学习一下React Native中的button。

普通样式的Button

首先来看Button组件的属性：

accessibilityLabel: ?string

设置辅助功能是需要显示的文字。

color: ?string

这里有个区别，在Android设备上设置的是Button背景的颜色，在Ios设备上设置的是Button上文字的颜色。

disabled: ?boolean

设置Button是否可以点击。

onPress: () => any

设置Button的点击事件。

testID: ?string

设置Button的id，用于控件查找，类似于我们Android中的android:id。

title: ?string

设置Button上显示的文字。

在React-Native中Button只有以上6种属性，使用起来还是非常简单的。但是你有没有注意Button并没有style属性，也就是说，不能通过style调整button的大小和布局，怎么办呢？很简单View组件是有style的吧，我们让Button的父组件是一个View就OK了。
下面来看具体使用方法：
首先 import中需要引入button组件

import React,{Component} from 'react';
import{
  AppRegistry,
  StyleSheet,
  Button
}from 'react-native';

声明一个点击按钮的事件，比如弹出一个Dialog，别忘了还需要在import中添加Alert组件；

import{
  AppRegistry,
  StyleSheet,
  Alert,
  Button
}from 'react-native';

const onButtonPress = () => {
  Alert.alert('点击了Button按钮');
};

暂时看不懂没关系，以后会具体学习的，现在只要知道这段代码会弹出一个Dialog就行了。然后就是在render中渲染就行了：

class HelloWorld extends Component{
  render(){
    return(
      <Button
        title="我是按钮"
        onPress={onButtonPress}
        color="#841584">
      </Button>   
      );
  }
}

运行结果：

《React native之路（八）Button》

点击按钮弹出一个Dialog

《React native之路（八）Button》

顶边太难看，现在给Button加一个16pd的外边距

<View style={{margin:16}}>
  <Button
    title="我是按钮"
    onPress={onButtonPress}
    color="#841584">
  </Button>      
</View>

注意看我们是在Button外层添加了一个View组件，并且设置了View的margin属性值为16（这里说一句，react native 中设置的margin, padding ,width,height等等这些属性值单位都是dp，Android的小伙伴看到应该会很高兴吧），显示效果如下：

《React native之路（八）Button》

边距添加成功了。
再来看一下disable属性的效果：

<Button
    disabled
    title="我是按钮"
    onPress={onButtonPress}
    color="#841584">
</Button>

注意看，是直接写disabled即可，Button默认是可点击的，添加disabled后就是不可点击状态，效果如下:

《React native之路（八）Button》

按钮背景自动变成了灰色，并且点击按钮也没有了任何响应。
testID这里先不讲解，因为还涉及到其他新的东西，等以后学习完了其他组件到了具体实战阶段会在详细讲解。
以上就是Button的用法，下面继续学习如何自定义Button，因为在实际开发中自定义button总是不可缺少的，对不。

自定义Button

对于自定义Button官方给我提供了两种方式，分别是TouchableOpacity和TouchableNativeFeedback(Android平台专用)。
首先来看TouchableOpacity，我们要实现的最终效果如下:

《React native之路（八）Button》

代码如下:

class ImageButton extends Component{
  render(){
    return(
      <TouchableOpacity  onPress={onButtonPress}  activeOpacity={0.2} focusedOpacity={0.5}>
         <View style=  {{justifyContent:'center',alignItems:'center',width:128,height:128,backgroundColor:'#841584'}}>
          <Image source={require('./image/ic_search.png')}>
          </Image>
          <Text style={{color:'#ffffff'}}>ImageButton</Text>
         </View>
      </TouchableOpacity>
  );
  }
}

TouchableOpacity组件中使用了三个属性，具体含义：
onPress 指定点击事件；
activeOpacity 正常状态下的透明度；
focusedOpacity 点击状态下的透明度；
TouchableOpacity组件的子组件是一个View，里边又包含了一个Image和Text，最终构成了我们自定义的ImageButton属性。
TouchableNativeFeedback其实和TouchableOpacity使用方式差不多，只不过属性不太一样，这里就不多说了。

掌握了TouchableOpacity和TouchableNativeFeedback，各位小伙伴就可以开心的定制各种各样的button了，so easy！

下面还有一个重头戏，感谢我们伟大的开源社区，为我们提供了各种各样的精美组件：
下面是几个Button样式的截图：

《React native之路（八）Button》 react-native-swipeout.gif
《React native之路（八）Button》 react-native-action-button.gif
《React native之路（八）Button》 react-native-circular-actio.gif
《React native之路（八）Button》 react-native-circle-button.gif
《React native之路（八）Button》 apsl-react-native-button.png

还有好多好多，就不一一列举了，每种样式的使用方式，如何引入，官网已经做了具体说明，最后奉上地址：https://js.coach/react-native/react-native-swipeout?search=button&filters=android

Button暂时就到这里吧，欢迎大家继续关注，一同学习React Native的其他组件。

    原文作者：Knight_Davion
    原文地址: https://www.jianshu.com/p/3a6b118be9c8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞