mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 17:45:59 +00:00
b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
---
|
|
id: props
|
|
title: Props
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/props.html
|
|
next: state
|
|
previous: tutorial
|
|
---
|
|
|
|
Most components can be customized when they are created, with different parameters. These creation parameters are called `props`.
|
|
|
|
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.
|
|
|
|
```ReactNativeWebPlayer
|
|
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);
|
|
```
|
|
|
|
Notice that `{pic}` is surrounded by braces, to 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. Just refer to `this.props` in your `render` function. Here's an example:
|
|
|
|
```ReactNativeWebPlayer
|
|
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);
|
|
```
|
|
|
|
Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX, just like 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 just invent new ones.
|
|
|
|
The other new thing going on here is the [`View`](/react-native/docs/view.html) component. A [`View`](/react-native/docs/view.html) is useful
|
|
as a container for other components, to help control style and layout.
|
|
|
|
With `props` and the basic [`Text`](/react-native/docs/text.html), [`Image`](/react-native/docs/image.html), and [`View`](/react-native/docs/view.html) 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](/react-native/docs/state.html).
|