003_ReactNative: Props

(问渠那得清如许,为有源头活水来。 双手奉上RN官网)

props (创建组件时使用的参数,是properties属性复数的缩写)

例如:


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 (
      //这里的source就是一个prop参数.在{}中可以嵌入JS表达
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

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

  • 你自己的组件也可以使用props,这使得你可以创建可重用的组件

例如:

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

//自定义的问候组件
class Greeting extends Component {
  render() {
    return (
      //使用 {this.props.name}来替换嵌入参数
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      //style用于描述样式
      <View style={{alignItems: 'center'}}>
         //这里通过name去设置不同的参数
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,156评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,108评论 25 709
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • 一.NSFileManager方法 define PATH @"/Users/qianfeng/Desktop/c...
    037e3257fa3b阅读 142评论 0 0
  • 来了吗 听 满屋的风声 就是你来临的诗句 而梧桐的细雨 滴滴答答 是我 心跳的声音 落叶说 这最后一只舞 就让我和...
    村妞不out阅读 266评论 0 1