React Native-4.React Native布局属性练习之flexBox模型实战

前端之家收集整理的这篇文章主要介绍了React Native-4.React Native布局属性练习之flexBox模型实战前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

废话不多说,学以致用!
代码

使用react native init 创建的项目中,在index.ios.js中编写的代码

wxsPrj 是我的工程名字,如果你的工程名字是xxx,那么请把下列代码中出现的所有wxsPrj 换成你的xxx 然后覆盖原来index.ios.js 中的所有代码,运行一下,得到的效果如下图所示:

'use strict';

var React = require('react-native');
var {
  AppRegistry,StyleSheet,Text,View,} = React;

var BoxStyles = StyleSheet.create({
    "height50": {
        height : 50,},"height400": {
        height : 400,"width400" : {
        width : 400,"bgred" : {
        backgroundColor : "#6AC5AC","Box" : {
        flexDirection : "column",flex: 1,position : "relative","centerView" : {
        flexDirection: "row",flex : 1,justifyContent : "space-between","label" : {
        top: 0,left: 0,paddingTop : 0,paddingRight: 3,paddingBottom : 3,position : "absolute",backgroundColor : "#FDC72F","top" : {
        justifyContent : "center",alignItems : "center","bottom" : {
        justifyContent: "center","right" : {
        justifyContent:"space-around",width : 50,"left" : {
        justifyContent: "space-around",width: 50,alignItems: "center","margginBox" : {
        "position" : "absolute","top" : 100,"paddingLeft" : 7,"paddingRight" : 7,})

var Box = React.createClass({
    render:function(){
        return(
        <View style = {[BoxStyles.Box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
            <View style = {[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}>
                <Text>top</Text>
            </View>

        <View style={[BoxStyles[this.props.childName]]}>
            <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}>
                <Text>left</Text>
            </View>
            <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}>
                <Text>right</Text>
            </View>
        </View>

        <View style={[BoxStyles.bottom,BoxStyles[this.props.classBg]]}>
            <Text>bottom</Text>
        </View>

        <View style={[BoxStyles.label]}>
            <Text>{this.props.BoxName}</Text>
        </View>
   </View>
    )
  }

})
var MargginBox = React.createClass({
    render : function(){
        return (
        <View style={[BoxStyles.margginBox]}>
            <Box childName="centerView" height="height400" width="width400" BoxName="margin" classBg="bgred">
                {this.props.children}
            </Box>
        </View>
        )
    }

})

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

AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

代码详解:

BoxStyles

var BoxStyles = StyleSheet.create
创建一个样式列表,里边是我们所能用到的一些控件的样式,就像我们在iOS中编写一个.h文件一样,统一的去管理一些常用或常改的变量一样。内容含义观看我上几篇对应的博客会有详细的理解。

Box

var Box = React.createClass
这里创建一个组件,这个组建就是盒子模型的详细实现过程,各种view之间的嵌套和样式的嵌套,也不难理解。
这里边使用到了类似this.props.classBg,this.props.BoxNam的写法,我们来说明一下:

this

this我们完全可以等同的理解为iOS 中的self指针。

props

这个变量,它是组件中一个自动生成的类似数组的变量,它是一个对象,用来组件接收外面传进来的参数,组件内部是不允许修改自己的props,只能通过父组件来修改
这个变量是在组件初始化阶段就被自动创建的。你大可认为它是一个数组,外边传进来的参数全部存放在里边。记录组件的属性

this.props.classBg

它的意思就是说我在props中取得classBg这个属性,那么这个属性我们是没有定义,那么从哪里来的,正如上边所说,props记录的是外边传进来的属性。那么我们在使用Box组件的时候需要给他传一个classBg的参数。

MargginBox

这个才是我们最中想要的组件,我们不难发现,我们在其中使用了Box组件,并传入了一些参数,这个结合上边的解释,想必大家都明白了。。

原文链接:https://www.f2er.com/react/307256.html

猜你在找的React相关文章