zoukankan      html  css  js  c++  java
  • 初探React-Native

    props

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

    以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。

    e.g

    import React, { Component } from 'react';
    import { AppRegistry, Image } from 'react-native';
    
    class TianXin extends Component {
      render() {
        let pic = {
          uri: 'http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg'
        };
        return (
          <Image source={pic} style={{ 200, height: 200}} />
        );
      }
    }
    
    AppRegistry.registerComponent('Bananas', () => TianXin);

    自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

    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);
  • 相关阅读:
    浏览器—CORS 通信的学习总结
    前端算法
    移动端适配时对meta name="viewport" content="width=device-width,initial-scale=1.0"的理解
    react和vue的区别
    对xss攻击和csrf攻击的理解
    前端如何解决跨域
    你没那么重要
    五福
    天道
    决策
  • 原文地址:https://www.cnblogs.com/liuShanPei1024/p/5779330.html
Copyright © 2011-2022 走看看