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 -20.React Native 自定义组件(跨文件,类似创建一个类)

哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButt...
  • wxs0124
  • wxs0124
  • 2016年10月10日 00:10
  • 947

React-Native创建Component的三种方式

从ES5-ES6过程中,有多种创建Component的过程,今天我就给大家介绍我新写的几种创建Component的写法: /** * Sample React Native App * http...

React-Native引用自定义组件

自定义组件LoginView: import React, { Component } from 'react'; import { AppRegistry, StyleShee...

React-Native系列Android——自定义View组件开发

如何自定义Android原生视图组件,并在React-Native开发中使用

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

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

<< React Native 入门与实战>>----第2章 React Native开发基础

2.1 flexbox布局 flexbox是React Native应用开发不可少的内容 2.1.2 布局模型 flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为fle...

React-Native系列Android自定义原生UI组件

由于官方的Android原生UI组件解释的并不是很完整,根据个人的不断摸索,终于成功完成原生组件的制作,所以写下这篇文章作为记录,也给让小白们少走些弯路。我这里通过讲解制作一个绘圆组件的流程,来学习制...

3.React Native在Android中自定义Component和Module

React Native最终展示的UI全是Native的UI,将Native的信息封装成React方便的调用。那么Native是如何封装成React调用的?Native和React是如何交互的?...

React Native声明属性和属性确认

属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我...

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

在React中一个组件我们可以理解为一个View下面介绍如何自定义并使用一个组件首先我们创建一个组件文件 ComponentExample.js'use strict';var React = re...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android React Native自定义组件的流程
举报原因:
原因补充:

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