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

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

从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中传过来的值。当创建的方式不同的时候,其实他们的导入方式也有几种,不知道看到博客的朋友是否注意到


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

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

MobX在React Native 中的使用心得

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

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

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

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

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

详细介绍 Weex 的 JS Framework【转】

Weex 是一个既支持多个前端框架又能跨平台渲染的框架,JS Framework 介于前端框架和原生渲染引擎之间,处于承上启下的位置,也是跨框架跨平台的关键。无论你使用的是 Vue 还是 Rax,无论是渲染在 Android 还是 iOS,JS Framework 的代码都会运行到

来聊聊怎么写react-native上的样式吧【转】

在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写css一样的去书写我们的样式。

Weex 和 React Native的区别和比较

weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。

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

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

RN混合开发,React Native与原生android和ios的交互通信

React-Native新版本(从原生发送消息到JS),Android/iOS原生模块给ReactNative发送事件,通知监听,通过DeviceEventEmitter,NativeEventEmitter通过原生应用通讯。