4,React Native 之Props(属性)

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
1,拿图片为例，导入Image，如果需要满屏的话，需导入Dimensions

import {
  AppRegistry,
  StyleSheet,
  Dimensions，
  Image,
  View
} from 'react-native';

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

export default class hyuxin extends Component {
  render() {
      let pic = {
        uri:"http://img27.51tietu.net/pic/2017-011500/20170115001256mo4qcbhixee164299.jpg" //全屏展示
      };
      return(
          <Image source={pic} style={{width:Dimensions.get('window').width,height:Dimensions.get('window').height}} />
      );
  }
}

效果：

Paste_Image.png

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

class Greeting  extends Component {
  render() {
    return (
        <Text>Hello {this.props.name}!</Text>
    );
  }
}
export default class hyuxin extends Component {
  render() {
    return (
        <View style={{alignItems: 'center'}}>
          <Greeting name='问候语1' />
          <Greeting name='问候语2' />
          <Greeting name='问候语3' />
        </View>
    );
  }
}
AppRegistry.registerComponent('hyuxin', () => hyuxin);

效果

Paste_Image.png

本文参考于http://reactnative.cn/docs/0.42/getting-started.html