2016-09-13 6 views
1

私はリアクターネイティブ& REDUXでアプリを構築しています。私はReact NativeのProgress View iOSを使用して、非常に単純なネイティブの進行状況バーを表示しています。ここでは、コードは次のとおりです。リアクションネイティブプログレスビューiOSは再レンダリングしません

renderProgressBar() { 
    if(!!Platform.OS) { 
     switch(Platform.OS) { 
      case 'ios': 
       return (
        <ProgressViewIOS 
         progress={(this.props.backgroundData.percentageLoaded || 0)} 
         progressTintColor={globalProgressBarTintColor} 
         trackTintColor={globalProgressBarEmptyTrackTintColor} /> 
       ); 

      case 'android': 
       return (
        <ProgressBarAndroid 
         color={globalProgressBarTintColor} 
         progress={(this.props.backgroundData.percentageLoaded || 0)} /> 
       ); 

      default: 
       return null; 
     } 

    } else { 
     return null; 
    } 
} 

私はそれにアプリを一時停止しているREDUXコンテナのと同様に、この中でビュー自体の方法をレンダリングし、私が進捗値のすべてが罰金でそれを作っていることを100%肯定しています。彼らは私のコンテナ内の減速機から見えるように見える。それらはすべてのレンダリング方法にも表示されます。彼らは0,0.2,0.4,0.6666666601,0.8,130です。

だから私が言っているのは、this.props.backgroundData.percentageLoadedは私が今述べたこれらの値に等しいことです。私はそれを一時停止することができ、値が確かにそこにあることを確認してください。数字は文字列ではないので、すべてがうまくいくはずです。何らかの理由で、5回レンダリングしても何も表示されません。

プログレスバーの値を1に設定し、バーの色を赤と青に設定しているので、それはうまく表示されません。私がこれらの狂った赤/青の色を保ち、上記のすべての値に進捗状況を設定すると、それらはすべて個別に機能します(動的な小道価値ではなくハードコードされます)。私は困惑しています

render() { 
    this.titleWidth = this.props.deviceWidth/2; 

    return (
     <View> 
      <View style={[ 
          styles.navbar, 
          { 
           width: this.props.deviceWidth, 
           justifyContent: (this.props.showBackIcon === false && this.props.showingTitle === false) ? 'flex-end' : 'space-between', 
          } 
         ]}> 

       { this.props.showBackIcon ? this.renderBackButton() : null } 

       { this.props.showingTitle ? this.renderTitle() : null } 

       { this.props.showingIcon ? this.renderRightIconButton() : null } 

       { this.props.showingTextButton ? this.renderRightTextButton() : null } 

      </View> 

      { this.renderProgressBar() } 
     </View> 
    ); 
} 

はケースで誰もが私だけがレンダリングされ、それはこのようになります使用していますネイティブのライフサイクルメソッドに反応知りたいです。誰か思う?ありがとう。

編集:また 、それは助け包み、ここで小道具として送信されるコンテナコードです:

const mapStateToProps = (state, props) => { 
    return { 
     ...safelyBuildPassProps(state.navigation.route.passProps), 
     deviceHeight: state.appSettings.deviceOrientation.currDeviceHeight, 
     deviceWidth: state.appSettings.deviceOrientation.currDeviceWidth, 
     backgroundData: { 
      loadingData: state.appSettings.loadingBackgroundData, 
      percentageLoaded: state.appSettings.loadingBackgroundDataPercent, 
     }, 
    } 
} 

第二編集

私はこれがすべてのベースであることがよりを説明する必要があり

ASyncの呼び出しと変換について説明します。すべてのプロセスは、クライアント(デバイス)で発生し、プロセスがこれらです:フェッチ

  • とバックエンドに

    • メイクコールは(成功ステータスとレスポンスオブジェクトを取得し、モデリングサービスへ
    • のモデリングサービスを送信します
    • レスポンスオブジェクトの配列を反復したら、配列の長さで100を除した後、再度100を除算してProgressViewIOSの10進数値を取得します。使用する。
    • 各オブジェクトの変換を完了した直後のパーセンテージを送信します。
    • ディスパッチは、進行状況バーがあるナビゲーションバーで再レンダリングを呼び出し、上のコードのように新しいパーセンテージを渡します。
    • ここで再レンダリングが起こる(私はそれが適切なJSXオブジェクトおよびパーセンテージを返す見るためにここにそれを一時停止している)が、デバイスの画面の変化
  • +0

    偉大な書き込みのための小道具!あなたはアプリケーションが 'case 'ios':'の中に戻ってきていることを確信していますか? 'return null'への道を作っていませんか? –

    +0

    @BradBumbalough確かに、私は、 'ios'の直後にデバッガを置いてパーセンテージがJSX objを返すようにしていることを確認しました。また、すべての適切な値を 'typeof 'number'として確認して、' ProgressViewIOS'にすることもできます。私がまだ試していない唯一のことは、 'ProgressViewIOS'を見つけてそれをレンダリングするデバッガを置くことです。 – GoreDefex

    +0

    ああ申し訳ありませんが、私はすべての 'return null;'文にブレークポイントを入れます – GoreDefex

    答えて

    1

    に何も問題は、私はおよそプログレスバーを更新しようとしていたということでした1秒未満で20回しかし、あなたのデータの進捗状況を見るために進行状況バーを表示することは素晴らしいことです。おそらくプログレスバーは必要ありません。

    私はそこに多くの時間を追加すると、プログレスバーがうまく更新する時間を過ごしました。

    関連する問題