react native typescript mobx template下载 - react native typescript mobx template源代码下载

react native typescript mobx template

其他源码

1.0.0

下载

反应本机，打字稿和MOBX

这是使用TypeScript和MOBX构建React-Native应用程序的重要示例。

步骤运行

克隆仓库
yarn install或npm install
react-native eject
react-native run-ios或react-native run-android

定义模型

 import Cause from "./Cause"
import User from "./User"
import CommonModel from "./CommonModel"

export declare type Deals = Deal [ ]

export declare type UDeal = Deal | undefined

export default interface Deal extends CommonModel {
    key : string
    dealType : string
    title : string
    price : number
    makerPercentage : number
    description : string
    tags : string
    url : string
    media : string [ ]
    cause ?: Cause | null
    user ?:  User | null
}

定义商店

 import { observable , action , runInAction , computed , IObservableValue } from 'mobx'
import { Deals } from '../models/Deal'
import { dealService } from '../services/deal/DealService'

export default class AppStore {
    @ observable isLoading : boolean = true
    @ observable isFailure : boolean = false
    @ observable searchTerm : IObservableValue < string > = observable . box ( "" )
    @ observable deals : Deals = [ ]
    @ observable currentDealId : string | null = null

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

    async fetchDeals ( ) {
        dealService . searchData ( this . searchTerm . get ( ) ) . then ( data => {
            runInAction ( ( ) => {
                this . isLoading = false
                this . deals = data
            } )
        } )
    }

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

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

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

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

调用组件

 export interface Props {
  appStore : AppStore
}

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

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

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

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

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