混合開發的大趨勢之一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: , height: }}/>
    );
  }
}

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

運作如下

我們有一個對象 叫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