react-native组件封装与传值

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-component-packaging-and-traditional-values/

刚接触React-Native的时候也是看官方文档，官方文档就是讲的基础的组件与与基础的API,然后就开始写一些简单的界面，但是发现自己写的简单界面代码非常的长，修改起来也是非常的麻烦，维护起来非常的费尽。那么今天就简单的介绍一下组件的封装和传值吧。你会发现节省了好多的代码。

效果图:(如下所示)

一、先说说没有封装之前的代码是什么样子的吧。

‘use strict‘;var React = require(‘react-native‘);var {    AppRegistry,    StyleSheet,    Text,    View,    PixelRatio,    } = React;var stylesForXC = StyleSheet.create({    container : {        height: 84,        borderWidth:1,        borderColor: ‘black‘,        flexDirection: ‘row‘,        marginTop: 25,        marginLeft: 5,        marginRight: 5,        borderRadius: 5,    /*圆角半径*/padding: 2,        backgroundColor: ‘#949494‘},

    item: {        flex: 1,        height: 80},

    flex: {        flex: 1},

    center: {        justifyContent: ‘center‘,/*垂直水平居中，其实是按照flexDriection的方向居中*/alignItems : ‘center‘,  /*水平居中*/},

    font : {        color: ‘#fff‘,        fontSize: 16,        fontWeight: ‘bold‘,    },

    lineLeft: {        borderLeftWidth: 1/PixelRatio.get(),        borderColor: ‘#fff‘,    },

    lineCenter: {        borderBottomWidth:1/PixelRatio.get(),        borderColor: ‘#fff‘,    }})

‘use strict‘;var React = require(‘react-native‘);var {    AppRegistry,    StyleSheet,    Text,    View,    PixelRatio,    } = React;var stylesForXC = StyleSheet.create({    container : {        height: 84,        borderWidth:1,        borderColor: ‘#949494‘,        flexDirection: ‘row‘,        marginTop: 25,        marginLeft: 5,        marginRight: 5,        borderRadius: 5,    /*圆角半径*/padding: 2,        backgroundColor: ‘#949494‘,    },

    item: {        flex: 1,        height: 80,    },

    flex: {        flex: 1,    },

    center: {        justifyContent: ‘center‘,/*垂直水平居中，其实是按照flexDriection的方向居中*/alignItems : ‘center‘,  /*水平居中*/},

    font : {        color: ‘#fff‘,        fontSize: 16,        fontWeight: ‘bold‘,    },

    lineLeft: {        borderLeftWidth: 1/PixelRatio.get(),        borderColor: ‘#fff‘,    },

    lineCenter: {        borderBottomWidth:1/PixelRatio.get(),        borderColor: ‘#fff‘,    }})

AppRegistry.registerComponent(‘wxsPrj‘, () => wxsPrj);var betree2 = React.createClass({    render: function() {        return (            <View style = {stylesForXC.flex}>                <View style = {[stylesForXC.container]}>                    <View style = {[stylesForXC.item,stylesForXC.center]}>                        <Text style= {stylesForXC.font}>饭馆</Text>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>服装城</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>美食街</Text>                        </View>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>电脑城</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>全球购</Text>                        </View>                    </View>                </View>            </View>        );    }})

AppRegistry.registerComponent(‘betree2‘, () => betree2);

我们发现在主函数上界面布局很多，这样不利于模块化的思想，我们其实可以把里面的界面的布局封装成一个名为Box的组件，然后在主函数中对组件进行引用，这样看起来就好多了。

二、封装组件后的代码如下:

render:function(){        return(            <View style = {stylesForXC.flex}>                <View style = {[stylesForXC.container]}>                    <View style = {[stylesForXC.item,stylesForXC.center]}>                        <Text style= {stylesForXC.font}>饭馆</Text>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>服装城</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>美食街</Text>                        </View>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>电脑城</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>全球购</Text>                        </View>                    </View>                </View>            </View>        );    }})

var betree2 = React.createClass({    render: function() {        return (            <Box></Box>        );    }})

这样看起来把布局放进去，在主函数中调用就可以了，这样是不是就清晰很多了。有一点我们是需要注意的就是:这种定义的组件首字母一定要大写，不然会报错(如下图所示，意思就是说每个首字母的名字要大写，刚开始我也没注意这个细节)。

三、那么问题又来了，如果我想修改<Text>组件里面的内容(比如:‘全球购‘改为‘电脑馆‘),有人会说那好办自己找下里面的代码把‘‘全球购‘改为‘电脑馆‘不就可以了，那如果我成百个Text呢? 我们其实可以定义一个组件参数，这样就方便多了。代码如下:

var Box = React.createClass({    render:function(){        return(            <View style = {stylesForXC.flex}>                <View style = {[stylesForXC.container]}>                    <View style = {[stylesForXC.item,stylesForXC.center]}>                        <Text style= {stylesForXC.font}>{this.props.one}</Text>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>{this.props.second1}</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>{this.props.second2}</Text>                        </View>                    </View>

                    <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>                        <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>                            <Text style= {stylesForXC.font}>{this.props.third1}</Text>                        </View>                        <View style = {[stylesForXC.center,stylesForXC.flex]}>                            <Text style= {stylesForXC.font}>{this.props.third2}</Text>                        </View>                    </View>                </View>            </View>        );    }})

var betree2 = React.createClass({    render: function() {        return (

            <Box one = "饭馆" second1 = "服装城"  second2 = "美食街" third1 = "电脑城" third2 = "全球购"></Box>

        );    }})效果图如下所示:

时间： 2024-10-15 11:17:47

react-native组件封装与传值的相关文章

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

React Native组件之Switch和Picker和Slide

React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * Switch 开关组件 Picker 选择器 和slide 进度条 */ import React, { C

React Native组件之ScrollView

React Native组件ScrollView类似于iOS中的UIScrollView.其使用方法和属性如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView 的常用属性 * 2016-09-19 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,

React Native 组件之TextInput

React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-16 * TextInput 常用属性 */ import React, { Component } from 'react'; import

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

React Native组件的结构和生命周期

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出

React Native组件、生命周期及属性传值props详解

创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { render (){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } } 第二种:通过ES5的方式创建 /** * 方式二:ES5 */ var HelloComponent= React.c

react native组件通信

在日常开发过程中,组件之间的通信我们应该经常用到,也是我们开发过程中不可或缺的一部分.组件可以分为父子组件以及兄弟组件,下面就不同组件之间的通信进行说明. 父组件通过props与子组件通信 定义父组件 import React, {Component} from 'react'; import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'; import Child from "./Child"; ex