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);

版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/7493169511ef
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-01-09 21:43:22
阅读 ( 1384 )
分类：

003_ReactNative: Props

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看