React-Native创建组件Component的三种方式

时间: 2018-05-14阅读: 1844标签: 跨平台作者: 转载

从ES5-ES6过程中,有多种创建Component的过程,今天我就给大家介绍我新写的几种创建Component的写法:


方式一 ES6创建组件的方式

export default class HelloComponent extends Component { 
render() { 
    return (<Text style={{fontSize:20,backgroundColor:'red'}}>Hello sun</Text>);
}}


方式二 ES5创建组件的方式

var HelloComponent=react.createClass({ 
render() { 
    return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello ES5创建组件的方式</Text> ); 
    }
}) 
module.exports=HelloComponent; //导出


方式三 函数

无状态,无法使用this,因为其没有指针,没有生命周期方法 pros 为函数的参数 通过使用{pros.name}来获得从index.js中传过来的值

function HelloComponent(pros){ 
 return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello 函数式 {pros.name}</Text> ); 
} 

module.exports=HelloComponent; //导出

在index.js

import HelloComponent from './HelloComponent' //加入此行 

export default class simple extends Component {
render() { 
 return (
 <View style={styles.container}> 
     <HelloComponent name = "小明"/> //使用HelloComponent组件 
 </View> );
} }


第一种和第二种方式也可以通过{this.pros.name}来获得index.js中传过来的值。当创建的方式不同的时候,其实他们的导入方式也有几种,不知道看到博客的朋友是否注意到


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/766

关闭

小程序跨平台开发解决方案探索

继微信正式推出微信小程序后,各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序,跨小程序平台开发也成为了众多小程序开发者要面临的问题。

如何将React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问。于是 React web 就出现了

五大跨平台移动应用开发工具

在移动应用程序开发领域,跨平台应用程序框架就是舞台的主角。企业使用这些框架来开发 Web 和移动应用程序。当你要为你的企业开发 Web 或移动应用程序时,你需要坚持以客户为中心的原则来寻求解决方案

React Native 与 Flutter 的跨平台之争

我们身处科技高速发展的时代;互联网日新月异,移动应用程序开发产业也在大踏步前进。多年来,移动应用的市场需求呈爆发式增长;众多企业都在开发自己的移动应用程序,或者用于促销自己的产品,或者用来向客户提供更好的服务

Flutter框架_谷歌推出的跨平台打造ios和android高质量的原生UI框架

Fluter是由google一款移动UI框架,意在帮助开发者在 iOS 和 Android 两个平台开发高质量的原生应用,Flutter是免费和开源的,就像Android SDK一样,并且可以与现有代码一起使用。Flutter的主要吸引力在于iOS和Android的智能和快速移动开发。

JSBridge框架解决通信问题实现移动端跨平台开发

目前主流的移动端平台主要是Android和iOS,为了尽可能复用代码和节省开发成本,各大巨头都开发了自己的跨平台框架,比如Facebook的React-Native、阿里的Weex、Cordova,以及今年Google开发者大会上介绍的Flutter框架

React Native常用插件_整理React Native插件系列之插件汇总

感觉到React Native的写APP效率真的很高,在NPM上搜索了一些插件,发现React Native的生态圈现在真的很大。绝对可以满足现在很多APP的需求,而不止企业类的APP了。

MobX在React Native 中的使用心得

MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。

都在封杀 React/React Native ,那我到底还该不该继续学呢?

如何看待百度要求内部全面停止使用 React / React Native?非常的火爆,以至于引发了前端的一片热议,整个圈子都在讨论这件事。

React Native 开发总结

选择react-native的几个重要因素:跨平台、基于React框架开发,组建化,响应式思路,调试方式可以缩短开发周期(在开发者熟练使用的情况下),也可以调整前端开发资源、热更新、新技术调研,扩展技术栈

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!