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