React-Native 基础(二) 使用Props实现传参定制

前端之家收集整理的这篇文章主要介绍了React-Native 基础(二) 使用Props实现传参定制前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参考文档:http://reactnative.cn/docs/next/props.html#content
根据我蹩脚的英文水平来看,Props来源于英文单词Property有属性的意思(Props作为一个完整单词来看译为支柱,不合语境)。

官方库提供的props
下面以Image为例,这里的source和style就是props.<Image source={pic} style={{width: 193,height: 110}}中pic外面的{}表示其内部是一个变量或者表达式,任意合法的javascript表达式都可以通过{}嵌入到JSX语句中。

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: 193,height: 110}} />
    );
  }
}
AppRegistry.registerComponent('Bananas',() => Bananas);

自定义的props

import React,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);

上述代码中即定制了名为name的props

猜你在找的React相关文章