react native typescript mobx template 다운로드 react native typescript mobx template 소스 코드 다운로드

react native typescript mobx template

기타 소스코드

1.0.0

다운로드

기본, TypeScript 및 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
}
}