React-Native 按钮点击几种效果进行对比

React-Native 自定义按钮系列

对几种按钮点击效果进行比较

import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Button,Alert,View,TouchableOpacity,TouchableHighlight,Text, TouchableWithoutFeedback,
} from 'react-native';export default class ButtonView extends Component {render() {return(<View style={{backgroundColor: '#ffaaaa',flex: 1,alignItems: 'center',justifyContent: 'center'}}><Button title="Button"onPress={this.actionButton}color={'#00f'}/><TouchableOpacity style={styles.touchButton}onPress={() => {alert('TouchableOpacity')}}><Text style={styles.touchButtonText}>点击按钮1</Text></TouchableOpacity><TouchableHighlight activeOpacity={0.9}underlayColor={'#1aaf00'}style={[styles.touchButton]}onPress={() => {alert('TouchableHighlight')}}><Text style={styles.touchButtonText}>点击按钮2</Text></TouchableHighlight>{/*显示背景 ,点击颜色, 透明度也是无效*/}<TouchableWithoutFeedback activeOpacity={0.9}underlayColor={'#1aaf00'}style={[styles.touchButton]}onPress={() => {alert('TouchableWithoutFeedback')}}><Text style={styles.touchButtonText}>点击按钮2</Text></TouchableWithoutFeedback></View>)}actionButton = () => {alert('Button')}
}
const styles = StyleSheet.create({touchButton: {height: 40,width: 100,borderRadius: 20,backgroundColor: '#fa1faa',justifyContent: 'center',overflow: 'hidden',},touchButtonText: {color: 'white',textAlign: 'center',}
});AppRegistry.registerComponent('ButtonView', ()=> ButtonView);

React-Native 按钮点击几种效果进行对比相关推荐

React Native按钮详解|Touchable系列组件使用详解
转载自:http://www.devio.org/2017/01/10/React-Native按钮详解-Touchable系列组件使用详解/ 在做App开发过程中离不了的需要用户交互,说到交互,我们 ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
android 按钮图片切换动画效果,Button按钮点击图片切换效果
Button按钮图片切换效果设置. 通常在工程中用到图片按钮点击事件,大多都用ImageButton.在这里我们用 Button的点击事件,在图片的切换过程中不再通过setBackgroundReso ...
按钮点击WIN8 磁贴效果
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android= ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
[译] React Native vs. Cordova、PhoneGap、Ionic，等等
原文链接: learnreact.design/2018/02/14/- 喜欢理由: 文笔生动通俗易懂特别鸣谢: 原作者 Linton Ye 的倾情校对系列博客: 用通俗的语言和涂鸦来解释 Re ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...

React-Native 按钮点击几种效果进行对比

React-Native 自定义按钮系列

对几种按钮点击效果进行比较

React-Native 按钮点击几种效果进行对比相关推荐

最新文章

热门文章