React Native 之 Props

---

大多数组件可以定制创建时,使用不同的参数。这些创建参数被称为Props（道具）。

例如,基本RN组件的image。当你创建一个image的时候,你可以使用prop 控制image显示。

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

注意：{pic}用括号包围,向JSX嵌入变量pic。你可以把任何JavaScript表达式嵌入在JSX括号内。

自定义的组件也可以使用props。在你的应用程序中、你可以抽成一个单独的组件，使用在许多不同的地方,每个地方略有不同的属性。只是参考props 在你渲染render 函数中。下面一个例子:

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

用name作为prop让我们定制问候组件,我们可以重用该组件。在JSX中、这个示例还使用问候组件,就像内置的组件。能力做到这一点,使React这么酷——如果你自己希望有一系列不同的UI元素,那么你可以自定义新的。

另一个新事物是视图组件。视图是有用的作为其他组件的容器,以帮助控制样式和布局。

props和基本的Text、Image和视图组件,您可以构建各种静态屏幕。学习如何让你的应用改变随着时间的推移,你需要学习State。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/props.html