混合开发的大趋势之一React Native Props (属性)

转载请注明出处:王亟亟的大牛之路

还是老规矩,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 坚持尽量每天更

昨天翻了点RN的第三方库,感觉歪果仁的一些项目和“大公湿”都已经 7 8成完全应用到自己的产品,感觉不加快学习进度不行了,这里也会加快更迭和学习进展,当然还是从官方DOC给大家介绍,没有任何JS基础的也可以跟得上

内容来源于 https://facebook.github.io/react-native/docs/props.html(应该有墙)

我会以顺序翻译+分析的角度跟大家一起学习

OK,废话不说 第一个主角 Props

什么是Props?

我对他的理解是 “属性”

那么何为属性?

在 Object-oriented programming(面向对象)的概念里
一个对象它可能包含数据、属性、代码与方法
就像 人是一个对象
他有一个属性是 身高
而身高 185CM 其实就是属性的数据

而Props 就是 RN中 属性的概念

官方对属性的解释与描述如下
混合开发的大趋势之一React Native Props (属性)_第1张图片

大多数组件在创建时就可以使用各种参数来进行定制。这些参数就是props(属性)。

然后举了个Image的例子,我们来看下源码

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

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

运行如下

混合开发的大趋势之一React Native Props (属性)_第2张图片

我们有一个对象 叫pic他有个 uri属性是uri 值是一个.jpg的图片地址

然后他被一个 <Image/>控件所引用,并设置了宽高,返回给了UI界面去渲染

对于这个控件来说 source属性 有个值 为 “xxxx.jpg” ,而style的属性是宽 高有他自己的值,经过一系列的属性描述构建出我们UI 视图上的图片组件

这里说一下语法

{pic}括号把JSX语句中潜入,括号里可能是表达式也可以是js变量,那也就阐明了一个很重要的点,这一切 都可以是 动态的

然后又举了个“自定义对象”概念的例子,我们来看下

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

我们创建了一个 Greeting 对象 它类似于 一个 自定义 <Text/>
他可以接受属性为 name 传参

LotsOfGreetings为我们的渲染对象

我们创建一个试图组 View

里面有3个 Greeting控件,并且给他们的name属性赋值。
运行下来就是上图的效果了。

属性的概念和我们 在 C C++ java等语言的 Perple.name可以 .出它的属性一个概念

在下一篇我会继续翻一下一章节 State

混合开发的大趋势之一React Native Props (属性)_第3张图片

你可能感兴趣的:(ios,android,应用,RN)