2016-07-13 33 views
22

私はネイティブ反応し、私は構文を使用して慣れでプログラミングを開始しました:JSが反応し、共有パッケージにネイティブリアクトReact JSでasync/awaitを使用できますか?

async myFunction(){ 
    ... 
    return await otherFunction(); 
} 

しかし、私はと互換性を持たせる方法がわかりません。どのようにすれば両方のプラットフォームで動作するようにすることができますか?

ありがとうございます!

+0

を使用することは可能でしょうか? – eden

+0

@EnieJakiro AsyncStorageが質問にどのように関連しているのか分かりません。私はAsyncStorageを使用しますが、React Nativeに対してのみ使用します。 –

答えて

16

ReactネイティブのBabelといくつかのBabelプリセットが同梱されていますが、ReactはWebだけがReact関連のコードです。 https://babeljs.io/docs/plugins/transform-async-to-generator/

や今日のアプリを反応させるのではかなり一般的であるステージ1のプリセット:あなたは非同期を使用したい場合は/今日ウェブ上で待ってい

あなたはバベルと正しい変換が必要になります。 http://babeljs.io/docs/plugins/preset-stage-1/

+0

あなたの答えをお寄せいただきありがとうございます。私は両方をインストールした後、 "npm run dev"を実行した後に、非同期関数の "Unexpected token"というエラーが発生します。 –

+0

あなたのプロジェクトについて詳しく調べる必要があります。あなたのpackage.jsonとwebpackを投稿できますか? config.jsファイル? – azium

+0

最後に、transform-async-to-generatorはReactのためにうまくいく、ありがとう@azium –

27

作成した反応し、アプリを使用して構築した場合、それがv0.2.3

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

それはこの

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { message: '' }; 
    } 

    async componentDidMount() { 
    this.setState({ message: 'loading...' }); 
    let d = await getData('/posts/1'); 
    this.setState({ message: d }); 
    } 

    render() { 
    let { message } = this.state; 
    return (
     <div className="App"> 
     <p className="App-intro"> 
      { message } 
     </p> 
     </div> 
    ); 
    } 
} 

を参照してくださいなどのコンポーネント内で使用することができますので、利用されています:

https://github.com/facebookincubator/create-react-app/issues/1024

+0

これは本当に良いヒントです。私はアプリを構築するためのこの方法を知らなかった。ありがとうございました! –

+0

Tim、componentDidMountメソッドを非同期にする方法は? –

+0

@ jamesemanonあなたの尋ねるものがわからない。 –

2

また、Typescriptを使用することもできます。

あなたはネイティブの公式文書を反応させるのにAsyncStorageを見ていましたバージョン2.1以降ではasync/awaitと直接transpile to ES5(言い換えれば、それは〜の上にすべてのブラウザを実行している)

関連する問題