props, short for properties.
Image. When you create an image, you can use a prop named
sourceto control what image it shows.
import React, { Component } from 'react'; import { Image } from 'react-native'; export default class Bananas extends Component { render() { let pic = { uri: '', }; return <Image source={pic} style={{ width: 193, height: 110 }} />; } }
{pic}- these embed the variable
picinto JSX. You can put any JavaScript expression inside braces in JSX.
props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to
this.propsin your
renderfunction. Here's an example:
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class Greeting extends Component { render() { return ( <View style={{ alignItems: 'center' }}> <Text>Hello {this.props.name}!</Text> </View> ); } } export default class LotsOfGreetings extends Component { render() { return ( <View style={{ alignItems: 'center', top: 50 }}> <Greeting name="Rexxar" /> <Greeting name="Jaina" /> <Greeting name="Valeera" /> </View> ); } }
nameas a prop lets us customize the
Greetingcomponent, so we can reuse that component for each of our greetings. This example also uses the
Greetingcomponent in JSX, similar to the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you can invent new ones.
Viewcomponent. A
Viewis useful as a container for other components, to help control style and layout.
propsand the basic
Text,
Image, and
Viewcomponents, you can build a wide variety of static screens. To learn how to make your app change over time, you need to learn about State.