mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 19:44:13 +00:00
8378f0f9f7
Summary: Explain the **motivation** for making this change. What existing problem does the pull request solve? I had tried fixing a broken link in a previous commit (#11453). My commit was merged, but it did not resolve the underlying problem. I have looked into how links should be formed for the docs and have fixed the original problem as well as updated all other links to be consistent. Previous link formats: - /docs/sample.html <-- broken link - sample.html <-- broken link - https://facebook.github.io/react-native/docs/sample.html <-- works - /react-native/docs/sample.html <-- works - docs/sample.html <-- works (permalink format) This PR updates all links to the permalink format. **Test plan (required)** I ran the website locally and manually tested half of the links in each category. They all worked. ``` $ cd website $ npm install && npm start ``` Closes https://github.com/facebook/react-native/pull/12064 Differential Revision: D4489153 Pulled By: mkonicek fbshipit-source-id: bf0231d941ba147317595c3b3466dc579a887169
74 lines
2.6 KiB
Markdown
74 lines
2.6 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`](docs/view.html) component. A [`View`](docs/view.html) is useful
|
|
as a container for other components, to help control style and layout.
|
|
|
|
With `props` and the basic [`Text`](docs/text.html), [`Image`](docs/image.html), and [`View`](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](docs/state.html).
|