React-Native Basic Component

Text

import React, { Component } from 'react'
import { AppRegistry, Text } from 'react-native'
 const App = () => <Text>Hello World</Text>

 AppRegistry.registerComponent("Project", () => App)
 
1
2

### Image
import React, { Component } from 'react' import { AppRegistry, Image } from 'react-native' const App = () => <Image source = {require('./img/sample.png')} /> AppRegistry.registerComponent("Project", () => App)
1
2

### View
import React, { Component } from 'react' import { AppRegistry, Text, View } from 'react-native' const App = () =&gt; ( &lt;View style={{alignItems: 'center'}} &gt; &lt;Text&gt;Hello World&lt;/Text&gt; &lt;/View&gt; ) AppRegistry.registerComponent("Project", () =&gt; App) `</pre> ### TextInput <pre>`import React from 'react' import { AppRegistry, TextInput, View } from 'react-native' const App = () =&gt; ( &lt;View&gt; &lt;TextInput placeholder = "Hello" /&gt; &lt;/View&gt; ) AppRegistry.registerComponent('Project', () =&gt; App) `</pre> ### ListView <pre>`import React, { Component } from 'react' import { AppRegistry, Text, View, ListView } from 'react-native' class SimpleList extends Component { constructor(){ super(props) var ds = new ListView.DataSource({ rowHasChanged: (r1,r2) =&gt; r1!==r2 }) this.state = { dataSource: ds.cloneWithRows(['john', 'joel','james','jimmy','jackson']) } } render(){ return ( &lt;View&gt; &lt;ListView dataSource={this.state.dataSource} renderRow={(rowData) =&gt; &lt;Text&gt;{rowData}&lt;/Text&gt;} &lt;/View&gt; ) } } AppRegistry.registerComponent("Project", () =&gt; SimpleList)
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×