React native学习第一章：Props

在React native中国里面有对props的定义：

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

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

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

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

显示三行文字

这时候，我就在想能不能在文字上面把图片添加进去

import React, { Component } from 'react';
import { AppRegistry, Text, View ,Image} from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings1 extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
         <Image source={pic} style={{width: 193, height: 110}} />

      </View>
       
     );
   
  }
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings1);
 

当然在appdelegate 里面要修改

 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"LotsOfGreetings"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

对其中的理解是LotsOfGreetings是需要统一的，这样才能运行，LotsOfGreetings1是可变的，无需跟app保持一致，其他的方式，我都试过了，return只能有一个，registercomponent只能写一次，还有return里面貌似只能又一个view，这些是初步学习的结果，我会保持更新，一起学习