as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

Props

Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties.

For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.


import React from 'react';
import {Image} from 'react-native';

const Bananas = () => {
  let pic = {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
  };
  return (
    <Image source={pic} style={{width: 193, height: 110, marginTop: 50}} />
  );
};

export default Bananas;

Notice the braces surrounding {pic} - these embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX.

Your own components can also use 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 props in your render function. Here's an example:

<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>

```tsx import React from 'react'; import {Text, View} from 'react-native'; const Greeting = props => { return ( <View style={{alignItems: 'center'}}> Hello {props.name}! </View> ); }; const LotsOfGreetings = () => { return ( <View style={{alignItems: 'center', top: 50}}> </View> ); }; export default LotsOfGreetings; ``` ```tsx import React from 'react'; import {Text, View} from 'react-native'; type GreetingProps = { name: string; }; const Greeting = (props: GreetingProps) => { return ( <View style={{alignItems: 'center'}}> Hello {props.name}! </View> ); }; const LotsOfGreetings = () => { return ( <View style={{alignItems: 'center', top: 50}}> </View> ); }; export default LotsOfGreetings; ```

</Tabs>

Using name as a prop lets us customize the Greeting component, so we can reuse that component for each of our greetings. 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.

The other new thing going on here is the View component. A View is useful as a container for other components, to help control style and layout.

With props and the basic Text, Image, and View components, 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.


Last updated: Sep 30, 2025