在使用react-native开发界面时,和原生开发有所不同(Android),因为没有提供现成的丰富控件,所以大多数展示控件需要自己编写,那么如何去做呢?
下面就从自定义一个button开始,let's do it~!
开发工具准备:推荐使用webstorm
将工程导入webstorm工作区中,如下:
1和2分别为Android和IOS平台的入口文件,其中src和img目录是自己新建的
src为自己编写的js代码存放目录,img是放图片的
在src目录下新建FirstButton.js,导入component和必要的组件,看代码
箭头起始处使我们自定义的字段,来看看如何引用我们这个MyButton
引用的是FirstButton.js这个js文件,我们的MyButton就是这个js文件里的component,引用文件的时候不用加后缀
注意:export default 对应import xx,xx为引用的别名,如上面的Button
再看看如何使用这个别名Button,
可以看到我们Button内有两个属性或字段,看起来是不是很眼熟?对,就是我们在上面提前写好的字段,一定要完全一致,至于怎么写完全看自己爱好
我们在EIndex页面引入了自己写的Button,传递了按钮的文字和点击事件,样式如下:
点击按钮之后,我们可以看到响应了我们传递给自定义按钮的事件,在引入页面(EIndex)显示了我们的alert,
如下:
通过以上的简单介绍,大家能初步了解自定义组件的流程;当然,自定义组件如果想要做到全面适配,可能还需要抽取更多的属性以暴露给使用者,这里是有个很好的例子,也许能帮助你对自定义组件有更新的认识
类似如下情况,这两行都是自定义的组件,如何做到点击班级返回后修改为八年级,而学校还是不变?