In React native China, there is a definition of props:

Most components can be customized with various parameters when they are created. These parameters for customization are called props (attributes).

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

Show a picture

Note that {pic} has a bracket around it. We need to use brackets to embed the variable pic into the JSX statement. The parentheses mean that the parentheses are a js variable or expression and need to be executed to get the value. So we can embed any legitimate JavaScript expression in JSX statements through parentheses.

Custom components can also use props. By using different attribute customization in different scenarios, the reuse scope of custom components can be improved as much as possible. Simply refer to this.props in the render function and process it as needed.

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

Display three lines of text

At this point, I was wondering if I could add pictures to the text.

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

Of course, in appdelegate, you need to modify it.

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

The understanding is that LotsOf Greetings needs to be unified so that it can run. LotsOf Greetings 1 is changeable and does not need to be consistent with app. Other ways, I have tried, return can only have one, registercomponent can only write once, and return can only seem to have another view. These are the results of preliminary learning. I will keep updating and learn together.