新手入门react-native(二)--自定义简单组件

在使用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,

如下:


通过以上的简单介绍,大家能初步了解自定义组件的流程;当然,自定义组件如果想要做到全面适配,可能还需要抽取更多的属性以暴露给使用者,这里是有个很好的例子,也许能帮助你对自定义组件有更新的认识


类似如下情况,这两行都是自定义的组件,如何做到点击班级返回后修改为八年级,而学校还是不变?

上一篇:新手入门react-native(一)-- 运行第一个helloworld

下一篇:新手入门react-native(三)--自定义组件'CheckBox'之互斥状态控制

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容