2017-03-09 4 views
1

私の状態をレンダリング機能から変更しようとしていますが、動作しません。リアクションネイティブsetState

render() { 
    return (
     <View> 
      // some code 

      {this._renderModal()} 
     </View> 
    ) 
} 

_renderModal() { 
     let channel = this.props.pusher.subscribe('my-channel'); 
     channel.bind('my-event', data => { 
      this.setState({ 
       requestedToEnter: false 
      }); 
      this.props.navigation.getNavigator('root').push(Router.getRoute('order', { restaurant_id })); 
     }); 

     return (
      <Modal 
       animationType={'slide'} 
       transparent={false} 
       visible={this.state.requestedToEnter} 
       onRequestClose={this._handleEnter}> 

       // some components 
      </Modal> 
     ) 
} 

私はそれにバインドされた機能を起動私のチャンネル私のイベントを受け取ります。 setStateメソッドは状態を変更しません(またはコンポーネントは再描画しません)。私はイベント機能でsetStateメソッドを使用しているからだと思う..プッシャーからイベントを受け取ったときにどうすればModalを閉じることができますか?

答えて

2

これは、setStateが呼び出されるたびにrender()でthis.setState関数を呼び出すと悪いことですが、コンポーネントはコンポーネント/サブコンポーネントにバインドされた更新された状態値でレンダリングされます。

代わりに、変数

this.state = { 
    isModalOpen: true 
} 

を状態を作成し、componentDidMount(であなたのプッシャーのイベントリスナーを置く)とコールバックであなたの状態変数値を更新することができます。次に、状態変数でモーダルコンポーネントの可視性を制御します。

<Modal 
    animationType={'slide'} 
    transparent={false} 
    visible={this.state.isModalOpen}></Modal> 
関連する問題