react-native
componenti

Componente di base

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {
  render () {
    return (
      <View> 
        <Text> I'm a basic Component </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

Componente di stato

Questi componenti avranno stati mutevoli.

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: "Sriraman"
    }  
  }
  render () {
    return (
      <View>
        <Text> Hi, {this.state.name}</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

Componente senza stato

Come suggerisce il nome, i componenti stateless non hanno nessuno stato locale. Sono anche noti come componenti stupidi . Senza alcun stato locale, questi componenti non necessitano di metodi per il ciclo di vita o di gran parte del boilerplate fornito con un componente stateful.

La sintassi della classe non è richiesta, puoi semplicemente fare const name = ({props}) => ( ... ) . Generalmente i componenti stateless sono più concisi di conseguenza.

Sotto c'è un esempio di due componenti stateless App e Title , con una dimostrazione di oggetti di scena che passano tra i componenti:

import React from 'react'
import { View, Text, AppRegistry } from 'react-native'

const Title = ({Message}) => (
  <Text>{Message}</Text>
)    

const App = () => (
  <View>
    <Title title='Example Stateless Component' />
  </View>
)

AppRegistry.registerComponent('App', () => App)

Questo è il modello consigliato per i componenti, quando possibile. Come nel futuro, è possibile eseguire ottimizzazioni per questi componenti, riducendo le allocazioni di memoria e i controlli non necessari.