react native javascript mobx template

기본, JavaScript 및 Mobx에 반응합니다

이것은 JavaScript 및 Mobx를 사용하여 React Native 앱을 구축하는 필수 예입니다.

1. 레포를 복제하십시오
2. yarn install 또는 npm install
3. react-native eject
4. react-native run-ios 또는 react-native run-android

스토어 정의 :

 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 )
    }
}

구성 요소로 호출 :

@ 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
}
}

문제가있는 경우 여기에 문제를 만들어 주시거나 이메일 [email protected] 또는 LinkedIn을 통해 저에게 연락 할 수 있습니다.

감사해요

참조

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