美文网首页
RN之props属性

RN之props属性

作者: 一只西西狸 | 来源:发表于2019-10-10 16:58 被阅读0次

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。
以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。

import React,{Component} from 'react';
import { Image} from 'react-native';

export default class Bananas extends Component{
    render(){
        let pic={
            uri:'https://dpic.tiankong.com/vx/g8/QJ8186298329.jpg?x-oss-process=style/794ws'
        };
        return(
            <Image source={pic} style={{width:193,height:110}}/>
            );
    }
}

请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

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

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', marginTop: 50}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

运行结果如图


我们在Greeting组件中将name作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在JSX语句中,用法和内置组件并没有差别——这正是react体系的魅力所在——如果想搭建一套自己的基础UI框架,那就放手做吧。
上面的例子出现了一样新的名为View的组件。View长用作其他组件的容器,来帮助控制布局和样式。

仅仅使用props和基础的TextImage以及View组件,你就已经足以编写各式各样的UI组件。要学习如何动态修改你的界面,那就需要进一步学习state(状态)的概念。

相关文章

  • RN之props属性

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

  • 2018-06-11 RN组件的生命周期

    主题:组件的生命周期 RN组件的props和state 1.属性(props) 它是组件的不可变属性(组件自己不可...

  • ReactNative Redux基本使用

    在RN里, 每个组件有两个属性, state 和 props, 他们都是对象, 里面可以包含多个属性 state ...

  • React Native 之{...this.props}解惑

    一、 {...this.props}之惑 接触rn也有段时间了,有{...this.props}这么个东东老是出现...

  • ReactNative学习之Props和State

    今天,我来说下RN里的Props和State属性,以及render()方法。 首先,我说下render()方法的作...

  • React Native 入门(五) - Props(属性)

    当前 RN 版本:0.49操作环境:Windows 10 Props(属性)是组件在被创建的时候就能够使用的各种参...

  • RN:Props

    React-Native:Props props:属性,大多数的组件在创建时可以使用各种参数进行设置,就是属性pr...

  • RN-Basic

    RN基础 Props(属性)/State(状态) 创建组件时 可以使用各种参数来进行定制, 用于定制的参数称为pr...

  • react--props

    props属性: props对于模块来说属性外来属性 传递参数: 模块中接受参数:this.props.username

  • React属性(props)和状态(state)

    React属性(props)和状态(state) 一、属性(props) 属性props是由外部传入、描述性质的,...

网友评论

      本文标题:RN之props属性

      本文链接:https://www.haomeiwen.com/subject/parapctx.html