React-Native 学习第二天：Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
1、展示一张图片

export default class TestRN extends Component {
  //render() 这是一个必须的方法，返回一些用户渲染结构的JSX语句
  render() {
    //定义一个pic常量，赋值为一个图片的地址
    let pic = {
      uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          RN学习第二天
        </Text>
        <Image source={pic} style={{width:193,height:110}} />
      </View>
    );
  }
}

<Image source={pic} style={{width:193,height:110}} />
这句话中，source和style就是属性。source控制图片的来源，也就是地址。注意这里的pic常量赋值方式，外面要加大括号。style控制图片显示的大小。

注意：在iOS上使用http链接的图片地址可能不会显示，因为ios9上增加了ATS，相信绝大部分的ios开发者都是知晓的。解决办法就是用xcode打开项目，修改plist文件属性，这里不再赘述。
运行效果如下：

image.png

2、自定义组件属性
就像是函数传参数一样，一个函数就类似于一个组件，属性相当于参数。上代码：

//自定义一个Greeting组件
class Greeting extends Component {
  render() {
    return (
       <Text>Hello {this.props.name}!</Text>
    );
  }
}

关键点就是 {this.props.name}! 这一句代码。这里的name就相当于是函数的参数，调用的方式如下：

//定义了一个名为TestRN的新的组件
export default class TestRN extends Component {
  //render() 这是一个必须的方法，返回一些用户渲染结构的JSX语句
  render() {
    //定义一个pic常量，赋值为一个图片的地址
    let pic = {
      uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          RN学习第二天
        </Text>
        <Image source={pic} style={{width:193,height:110}} />
        <View style = {{alignItems:'center'}}>
           <Greeting name='小明' />
           <Greeting name='花袭人' />
           <Greeting name='七夕' />
       </View>
      </View>
    );
  }
}

主要代码如下：

     <View style = {{alignItems:'center'}}>
           <Greeting name='小明' />
           <Greeting name='花袭人' />
           <Greeting name='七夕' />
       </View>

运行效果如下：

image.png

如果有需要源码的请私信联系我。

如果有错误的地方，还请指出，不胜感激。