React Native 学习笔记三（关于prop属性的使用和复用）

例子出现了一样名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。（每个return下面 只能有一个直属的View）

仅仅使用props和基础的Text、Image以及View组件，就已经足以编写各式各样的UI组件了。

Props（属性）import {
AppRegistry,
StyleSheet,
Image,
View
} from 'react-native';


class helloReact extends Component {
//渲染
render() {
//pic 外层有{} 是为了将变量嵌套进jsx中 {}表示的意思事{}内部为一个js变量或者表达式 需要执行 并将执行后的值取出
// let相当于var 变量定义 (目前理解)
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}

不同的场景使用不用的属性定制  可以提高复用性 

import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class Greeting extends  Component{  render(){    return(        //自定义控件也可以使用props(属性)      <Text>Hello{this.props.name}</Text>    );  }}class helloReact extends Component {  //渲染  render() {    return (        //设置显示风格 自定义View 显示结果为Hellohello HelloWorld        <View style={{alignItems:'center'}}>          <Greeting name='hello'/>          <Greeting name='World'/>        </View>    );  }