React Native-5.React Native组件封装,组件传值实例开发

前端之家收集整理的这篇文章主要介绍了React Native-5.React Native组件封装,组件传值实例开发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一篇,我们来练习一下组件的封装和组件的传值

九宫格例子:

老样子,我们又图,没图说个xx
预期效果

先来看看没有封装组件前的代码

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

var wxsPrj = 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.lineCenter]}> <Text style= {stylesForXC.font}>美女</Text> </View> <View style = {[stylesForXC.center,stylesForXC.flex]}> <Text style= {stylesForXC.font}>年货来了</Text> </View> </View> </View> </View> ); } }) AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

我们发现,在主接口函数中的界面布局很多,这样不利于我们模块化的思想我们搞出些事情,把里边界面的布局代码封装成一个组件NineBox

代码变动:

var NineBox = 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.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.lineCenter]}>
                    <Text style= {stylesForXC.font}>美女</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>年货来了</Text>
                </View>
            </View>
        </View>
        </View>
        );
    }
}) 


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

不难发现,我们重新创建一个组件,把布局放进去,然后在主接口函数调用一下就ok,显得简洁明了
这里有个需要大家注意的地方,这种组件定义的时候,组件名称开头一定要大写英文字

好了,问题又来了,我们现在想把效果途中的“美女”改成“帅哥”那么,就目前的代码来说,我们只能找到“美女”替换了,但是,我们是组件开发啊同志们,怎么能这样low,这个时候我们就需要来定义组件参数了,把它写活,到时候传一个变量即可,废话不多说。

var NineBox = 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.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 wxsPrj = React.createClass({
  render: function() {
    return (

            <NineBox one = "我到家了" second1 = "四件套"  second2 = "八杯茶" third1 = "帅哥" third2 = "舒服的大床"></NineBox>

        );
    }
})

看看效果

<NineBox one = "我到家了" second1 = "四件套" second2 = "八杯茶" third1 = "帅哥" third2 = "舒服的大床"></NineBox> 中的one, second1,second2,third1,third2,就是在NineBox组件定义的时候使用的{this.props.second1}

  • 代码中引入了PixelRatio API,它的get方法获取设备的像素比,1/PixelRatio.get() 就可以获取最小线宽。
  • container 使用了 margin属性,marginTop:25,使得内容距离状态25pt, marginLeft,marginRight 以此类推。
原文链接:https://www.f2er.com/react/307254.html

猜你在找的React相关文章