react native javascript mobx template

Reagieren Sie Native, JavaScript und MOBX

Dies ist ein wesentliches Beispiel für die Erstellung von React-native App mit JavaScript und MOBX.

1. Klonen Sie das Repo
2. yarn install oder npm install
3. react-native eject
4. react-native run-ios oder react-native run-android

Geschäft definieren:

 import { observable , action , runInAction , computed , autorun } from 'mobx' ;
import ajax from '../util/ajax'

export default class AppStore {
    @ observable isLoading = true
    @ observable isFailure = false
    @ observable searchTerm = observable . box ( "" )
    @ observable deals = [ ]
    @ observable currentDealId = null

    constructor ( ) {
        this . searchTerm . observe ( ( value ) => {
            this . fetchDeals ( value . newValue )
        } , true )
    }

    async fetchDeals ( ) {
        ajax . fetchDealSearchResults ( this . searchTerm ) . then ( data => {
            runInAction ( ( ) => {
                this . isLoading = false
                this . deals = data
            } )
        } )
    }

    @ action setSearchTerm ( searchStr ) {
        this . searchTerm . set ( searchStr )
    }

    @ action
    setCurrentDeal ( dealId ) {
        this . currentDealId = dealId
    }

    @ action
    unsetCurrentDeal ( ) {
        this . currentDealId = null
    }

    @ computed get currentDeal ( ) {
        return this . deals . find ( ( deal ) => deal . key === this . currentDealId )
    }
}

Rufen Sie Komponenten an:

@ inject ( "appStore" ) @ observer
class App extends React . Component {

  searchDeals = ( searchTerm ) => {
    this . props . appStore . setSearchTerm ( searchTerm )
  }

  setCurrentDeal = ( dealId ) => {
    this . props . appStore . setCurrentDeal ( dealId )
  }

  unsetCurrentDeal = ( ) => {
    this . props . appStore . unsetCurrentDeal ( )
  }

  render ( ) {
    const appStore = this . props . appStore
}
}

Wenn Sie ein Problem sehen, zögern Sie bitte nicht, hier ein Problem zu erstellen, oder können Sie mich per E -Mail an [email protected] oder linkedIn kontaktieren

Danke

Referenzen

1. https://facebook.github.io/react-native/docs/tutorial
2. https://github.com/jscomplete/react-native-essential-training
3. https://mobx.js.org
4. https://www.tutorialspoint.com/es6