混合开发的大趋势之一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中 属性的概念

官方对属性的解释与描述如下

大多数组件在创建时就可以使用各种参数来进行定制。这些参数就是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);

运行如下

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

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

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

这里说一下语法

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

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

import React,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