mirror of
https://github.com/status-im/react-native.git
synced 2025-01-29 18:54:58 +00:00
4243d682a0
Summary: This is an improvement to basic components docs. * I updated the basic components example code to better render components on iOS (added paddingTop). * I also modified the code to allow reader to easily copy, paste, and then run the code in their project if they followed the 'Getting Started' quick start guide. * I also added additional copy to clarify suggested usage/guidelines. Closes https://github.com/facebook/react-native/pull/8292 Differential Revision: D3469943 Pulled By: JoelMarcey fbshipit-source-id: 21ff6ee13b59741c43d80aab68a38aace0fbfca6
1.3 KiB
1.3 KiB
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| basics-component-text | Text | docs | Basics | docs/basics-component-text.html | basics-component-image |
The most basic component in React Native is the Text component. The Text component simply renders text.
This example displays the string "Hello World!" on the device.
import React from 'react';
import { AppRegistry, Text } from 'react-native';
const AwesomeProject = () => {
return (
<Text style={{marginTop: 22}}>Hello World!</Text>
);
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
In this slightly more advanced example we will display the string "Hello World" retrieved from this.state on the device and stored in the text variable. The value of the text variable is rendered by using {text}.
import React from 'react';
import { AppRegistry, Text } from 'react-native';
var AwesomeProject = React.createClass({
getInitialState: function() {
return {text: "Hello World"};
},
render: function() {
var text = this.state.text;
return (
<Text style={{marginTop: 22}}>
{text}
</Text>
);
}
});
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);