Android React Native自定义组件的流程

原创 2015年11月20日 14:56:02

假设我们现在有这么一个需求,就是自定义一个组件,该组件由一个小图标和图标的文字说明组成,并且带有背景色,背景色可设置,宽度高度可设置。如下图所示正是两个这样的组件所组成。

这里写图片描述

首先,在index.android.js目录下新建一个js文件,命名为item.js,在里面输入模板代码

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
} = React;


var Item = React.createClass({
  render: function() {

    return (
      <View>

      </View>
    );
  },
});

var styles = StyleSheet.create({

});

module.exports = Item;

注意最后的一句module.exports = Item;,将组件导出。

我们的组件最外围应该是一个View,View里面嵌套了一个Image和Text,并且View,Image,Text都有对应的样式,图片地址还要可以设置,文本内容可设置,而View的背景色,高度,宽度等样式应该由外部传入,并且与组件内部的样式联合作用,这一点可以使用样式数组实现,即style={[style1,style2,style3]},最终,render函数中返回的信息如下。

<View style={[styles.item,outStyle]}>
    <Image style={styles.image} source={{uri:img}}/>
    <Text style={styles.text}>{text}</Text>
</View>

现在我们拿到外部设置的属性值

var outStyle={
  width:parseInt(this.props.width),
  height:parseInt(this.props.height),
  backgroundColor:this.props.color,
}
var img=this.props.img;
var text=this.props.text;

所以最终的代码是这样的

var Item = React.createClass({
  render: function() {
    var outStyle={
      width:parseInt(this.props.width),
      height:parseInt(this.props.height),
      backgroundColor:this.props.color,
    }
    var img=this.props.img;
    var text=this.props.text;
    return (
      <View style={[styles.item,outStyle]}>
        <Image style={styles.image} source={{uri:img}}/>
        <Text style={styles.text}>{text}</Text>
      </View>
    );
  },
});

在内部我们还要对其进行样式化


var styles = StyleSheet.create({
  item:{
    justifyContent:'center',
    alignItems:'center',
    borderRadius:10,
    marginLeft:5,
    marginRight:5,
    marginTop:5,
    marginBottom:5,
  },
  image:{
    width:48,
    height:48,
  },
  text:{
    color:'#ffffff',
    alignItems:'center'
  }
});

当然,这个View还可以提取很多属性为自定义的属性,本例子只是为了演示,所以提取了几个个别的属性

如何使用?
也很简单,要使用的文件中引入该组件,使用定义的标签,并设置对应的属性即可。

引入组件

var Item = require('./item');

使用组件

var AwesomeProject = React.createClass({
  render: function() {
    return (
        <View style={styles.container}>
        <Item style={styles.item1} color='#aaa' width='100' height='100' text='Icon' img='https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_achievement.png'></Item>
        <Item style={styles.item2} color='#aaa' width='100' height='100' text='Icon' img='https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_bike.png'></Item>
      </View>      
    );
  },
});

var styles = StyleSheet.create({
    container:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#ff0000'
  },
  item1:{
    marginLeft:100,
  },
  item2:{
    marginLeft:100,
  }
});

可以看到我们在render函数中使用了Item标签,并在该标签中设置了自定义的属性,最终这些属性会被设置到我们的组件上去。

版权声明:本文为博主原创文章,未经博主允许不得转载。

React-Native自定义view显示(原生端)

自定义view: 自己写原生的view显示在RN界面上。 这次主要是项目需要绘制一张大图,里面有很多节点和线,如果使用单纯RN提供的view去做,需要的内存不够(量级在K以上),所以需要想办法在一...
  • pz789as
  • pz789as
  • 2016年09月06日 10:59
  • 2962

React.js点击获取自定义属性

获取React.js自定义属性必须data- ,比如data-index  然后用event.target.getAttribute("data-index") 或者console.log(this...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月15日 09:33
  • 4571

React-Native自定义view显示(js端)

上一篇是原生方面的代码,现在说下js这边的代码,由于自己水平也不够,都是参照别人的插件写的 'use strict' import React, { Component } from 'react...
  • pz789as
  • pz789as
  • 2016年09月06日 12:00
  • 994

React-Native 安卓自定义View(一)

React-Native 安卓自定义View(一) 在移动端开发中,使用React-Native的越来越多,其使用js作为开发语言,并且提供大量的组件,大大提升了移动端开发的效率。但是最近在使用的过程...
  • qq_24815655
  • qq_24815655
  • 2017年09月11日 15:17
  • 73

React Native--组件Component

创建一个Component一个组件类可以像前面Hello World工程中那样通过 class HelloWorldAppp extends Component 来创建,或者通过React.creat...
  • heqiangflytosky
  • heqiangflytosky
  • 2016年12月28日 15:34
  • 2730

react-native 自定义组件

创建第一个组件 react-native 组件只需要在组件代码后面加上:module.exports = YoukuComponet; “YoukuComponet”是我这里将要创建的一个demo...
  • ypxu87
  • ypxu87
  • 2016年03月02日 11:36
  • 5035

React Native学习之调用Android自定义view

Android是一个开源的项目,有许多丰富并且功能强大的第三方自定义控件,那么React Native如何调用Android自定义的控件呢?请听我娓娓道来。  这里就不讲究如何自定义Androi...
  • qq_32014215
  • qq_32014215
  • 2017年02月23日 16:21
  • 166

React-Native自定义view的缩放问题

前不久根据RN中文网写了一个带drawRect的原生UIView,虽然可以完整显示出所有需要画的东西,但是缩放就出现了问题。 我想要达到的目的是想网页一样缩放,就是在移动之后,在屏幕中心缩放。这个...
  • pz789as
  • pz789as
  • 2016年09月09日 13:31
  • 1372

React Native学习之自定义一个组件

在React中一个组件我们可以理解为一个View下面介绍如何自定义并使用一个组件首先我们创建一个组件文件 ComponentExample.js'use strict';var React = re...
  • u014410695
  • u014410695
  • 2016年02月15日 15:20
  • 2827

react-native 自定义组件

创建第一个组件 react-native 组件只需要在组件代码后面加上:module.exports = YoukuComponet; “YoukuComponet”是我这里将要创建的一个demo...
  • ypxu87
  • ypxu87
  • 2016年03月02日 11:36
  • 5035
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android React Native自定义组件的流程
举报原因:
原因补充:

(最多只允许输入30个字)