react native javascript mobx template

Native、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
}
}

問題がある場合は、ここで問題を作成することをheしないでください。また、電子メールで[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