React native自定义组件之Button按钮
2017-07-18 23:01
309 查看
最近也是在自学react native这一块,其中也踩了不少坑,由于使用windows环境,可能是因为运气不好,最开始配环境的时候就出现了很多问题,当成功之后也发现,啊哈,原来如此,有一朋友就很顺利一遍就成功。好了还是进入主题,在Android原生开发中我们大多都会事先在drawable中定制几个按钮然后在项目中直接调用很方便。当然,在react native开发中我们也可以事先写好一个button,然后在import进来直接使用。接下来我把主要步骤记录下来,方便以后查看,也可以给初学者做做参考,谢谢。
1,第一步先在项目中新建button.js文件,button中的代码如下:
其中 class Button 组件一定要导出去也就是使用export default 关键字,这样外面才可以引用,至于代码中的…flextCenter的使用是这么来的,我事先建了style.js文件,然后文件中声明了flextCenter变量代码如下:
其中也使用了export class关键字,这样在button.js文件中导入flextCenter就可以直接使用了,导入代码如下
由于flextCenter是一个变量所以用了{},这样在组件中就直接可以使用该属性了,至于这两个属性的作用我就不多提了。当然,如果使用的属性更多,你还可以在该变量中加入其他属性比如backgroundColor都是可以的。
然后就是在其他组件中使用Button组件了,这里我新建了find.js文件,文件中的代码如下:
为了方便我是在index.android.js中注册的Find,代码如下:
最后实现的效果图如下:
其实我们在原生开发中大多按钮都是带有圆角的,我们只需要在组件Button中给View多增加一些样式就可以实现,增加代码如下
然后效果图:
至此其实自定义组件Button已经可以使用了,其实还有很多不足,比如,宽度高度都是我们事先写死了,也就是固定的,这样使用起来也很不方便,接下来我们修改button.js中的代码,然后可以让使用者自定义宽高以及背景颜色还有文字:
引用组件部分代码:
效果图:
现在该组件稍加修改已经可以满足大部分需求了,由于我也是学习这块没多久不足之处还请多多见谅。
最后我自己也在用React native 写了一个小项目,也是抽时间再写,完成了登录注册模块,然后导航栏也加进去了,我会抽时间把这个项目逐渐完善,最后也是附上项目地址,希望大家多多指教。谢谢。
项目地址
1,第一步先在项目中新建button.js文件,button中的代码如下:
import React, { Component } from 'react'; import { View, Text, Dimensions } from 'react-native'; import { flextCenter } from './values/style' export default class Button extends Component { render(){ return( <View style = {{...flextCenter,backgroundColor:'blue',width:Dimensions.get('window').width-40,height:45}}> <Text style = {{color:'white',fontSize:20}}>登录</Text> </View> );
其中 class Button 组件一定要导出去也就是使用export default 关键字,这样外面才可以引用,至于代码中的…flextCenter的使用是这么来的,我事先建了style.js文件,然后文件中声明了flextCenter变量代码如下:
export const flextCenter={justifyContent:'center',alignItems:'center'}
其中也使用了export class关键字,这样在button.js文件中导入flextCenter就可以直接使用了,导入代码如下
import { flextCenter } from './values/style'
由于flextCenter是一个变量所以用了{},这样在组件中就直接可以使用该属性了,至于这两个属性的作用我就不多提了。当然,如果使用的属性更多,你还可以在该变量中加入其他属性比如backgroundColor都是可以的。
然后就是在其他组件中使用Button组件了,这里我新建了find.js文件,文件中的代码如下:
import React,{Component} from 'react'; import { View, StyleSheet } from 'react-native'; import Button from './button' export default class Find extends Component{ render(){ return( <View style = {styles.container}> <Button/> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, justifyContent:'center', alignItems:'center', }, })
为了方便我是在index.android.js中注册的Find,代码如下:
import React, { Component } from 'react'; import { AppRegistry, } from 'react-native'; import Find from './app/find' AppRegistry.registerComponent('MyScreen', () => Find);
最后实现的效果图如下:
其实我们在原生开发中大多按钮都是带有圆角的,我们只需要在组件Button中给View多增加一些样式就可以实现,增加代码如下
borderRadius:20
然后效果图:
至此其实自定义组件Button已经可以使用了,其实还有很多不足,比如,宽度高度都是我们事先写死了,也就是固定的,这样使用起来也很不方便,接下来我们修改button.js中的代码,然后可以让使用者自定义宽高以及背景颜色还有文字:
render(){ const {width,height,backgroundColor,children,borderRadius} = this.props return( <View style = {{...flextCenter,backgroundColor,width,height,borderRadius}}> <Text style = {{color:'white',fontSize:20}}>{children}</Text> </View> ); }
引用组件部分代码:
render(){ return( <View style = {styles.container}> <Button backgroundColor = {'blue'} width = {Dimensions.get('window').width - 40} height = { 45 } borderRadius = { 20 }> 这是自定义组件 </Button> </View> ); }
效果图:
现在该组件稍加修改已经可以满足大部分需求了,由于我也是学习这块没多久不足之处还请多多见谅。
最后我自己也在用React native 写了一个小项目,也是抽时间再写,完成了登录注册模块,然后导航栏也加进去了,我会抽时间把这个项目逐渐完善,最后也是附上项目地址,希望大家多多指教。谢谢。
项目地址
相关文章推荐
- 导航栏设置返回按钮为自定义的 button 这时候设置 button 的一些属性
- Android 自定义Button按钮显示样式(正常、按下、获取焦点)
- Android 自定义Button按钮显示样式(正常、按下、获取焦点)
- Jquery自定义button按钮的几种方法
- SugarCRM - 如何在去掉Contact下自定义模块的remove_button按钮
- UIBarButtonItem-添加自定义Left或者Right按钮 <总结>
- React Native自定义组件——弹出框
- Android自定义Button按钮显示样式
- ImageButton背景透明(没有按钮框)以及自定义不同状态样式,自定义背景
- 自定义 React Native 二维码扫描组件(简单,易用!)
- 自定义组件---图片和文字实现ImageButton效果
- Tkinter Button按钮组件如何调用一个可以传入参数的函数
- 自定义导航栏按钮UIBarButtonItem 文字或图片
- Android 自定义Button按钮显示样式(正常、按下、获取焦点)
- 重写UGUI按钮组件button的点击、选中事件
- 界面编程之基本界面组件(5)ToggleButton(状态开关按钮)
- Android自定义可拖拽的悬浮按钮DragFloatingActionButton
- 自定义导航栏按钮UIBarButtonItem 文字或图片
- ---转Android 自定义Button按钮显示样式
- Android自定义Button按钮显示样式