インタラクションマネージャーを使用しても、リアクションネイティブのトランジションスピードが非常に遅い

Question

あるシーンから別のシーンへのトランジッションスピードの問題に直面しています。

はすでに移行ComponentDidMountでサーバーから非同期リクエストを呼び出す

ためtouchbleopacityを使用していない

InteractionManager

もの

1. を試してみました。

4.オープンソースインタラクションパッケージも試してみましたが、私にとってはうまくいきませんでした。

5.Evenしようとした次のフレームNPMパッケージそれでも

「didntはそれを使用するための完璧な例を見つけ...は...非同期要求のために...で適用反応し、ネイティブReduxのアプリをするのは良いが、取得didfficultをLokks」移行時にUIが1秒間フリーズします。

任意遷移の速度を上げるほどです。

おかげ

編集#addingコードは今

class ReviewsFeed extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     AuthHeader:'', 
     renderPlaceholderOnly:true, 
    }; 
} 


componentDidMount(){ 
    InteractionManager.runAfterInteractions(() => { 
     let realm = new Realm({ 
      schema: [{name: 'LoginAuth', properties: {LoginAuthKey: 'string'}}] 
     }); 

     let backupdata = realm.objects('LoginAuth'); 
     let stringtoarray = backupdata[0].LoginAuthKey; 
     let Authobjects = JSON.parse(stringtoarray); 

     let replies = ["all"]; 
     let category_mentions= ["all"]; 
     let date_range = { 
      "start":"2017-02-01", 
      "end":"2017-02-28" 
     }; 

     let nps="all"; 
     let properties = ["all"]; 
     let sources = ["all"]; 
     let tags = []; 
     let limit = 6; 
     let rating = -1; 
     let skip = 0; 


      // asynch request through redux    
     this.props.actions.ReviewsFeeddata(Authobjects,replies,category_mentions,date_range,nps,properties,sources,tags,limit,rating,skip); 
     this.props.actions.Properties(Authobjects); 
     this.setState({renderPlaceholderOnly: false}); 
    }); 
} 

Issuescontainer(){ 
    InteractionManager.runAfterInteractions(() => { 
     this.props.navigator.push({ 
      id:'Issuescontainer' 
     }) 
    }); 

} 

Reviewsfeed(){ 
    InteractionManager.runAfterInteractions(() => { 
     this.props.navigator.push({ 
      id:'ReviewsFeed' 
     }) 
    }); 
} 

GuestFeedback(){ 
    InteractionManager.runAfterInteractions(() => { 
     this.props.navigator.push({ 
      id:'GuestFeedback' 
     }) 
    }); 
} 

openDrawer() { 
    this.refs['myDrawer'].openDrawer(); 
} 

_renderPlaceholderView() { 

    return (
     <View> 
      <ReviewsHeader opentheDrawer={this.openDrawer.bind(this)} /> 
     </View> 
    ); 
} 

render() { 

    if (this.state.renderPlaceholderOnly == true) { 
     return this._renderPlaceholderView(); 
    } 

    var navigationView = (
     <Container style={styles.FilterBackground}> 
      <Content> 

       <View style={styles.FilterHeader}> 
        <Text style={styles.FilterHeaderstyle}> Menu </Text> 
       </View> 

       <List> 

        <ListItem> 
         <Button style={styles.menubutton} light block onPress={this.Reviewsfeed.bind(this)}> 
          <Text>Reviews Feed</Text> 
         </Button> 
        </ListItem> 


        <ListItem> 
         <Button style={styles.menubutton} light block onPress={this.GuestFeedback.bind(this)}> 
          <Text>Guest Feedback</Text> 
         </Button> 
        </ListItem> 

        <ListItem> 
         <Button style={styles.menubutton} light block onPress={this.Issuescontainer.bind(this)}> 
         <Text> Issues </Text> 
         </Button> 
        </ListItem> 

        <ListItem> 
         <Button style={styles.menubutton} light block> 
          <Text> Sign Out </Text> 
         </Button> 
        </ListItem> 

       </List> 
      </Content> 
     </Container> 
    ); 

    return (
     <AfterInteractions> 
     <DrawerLayoutAndroid 
          ref="myDrawer" 
          drawerWidth={300} 
          drawerPosition={DrawerLayoutAndroid.positions.Left} 
          renderNavigationView={() => navigationView}> 

      <ReviewsHeader opentheDrawer={this.openDrawer.bind(this)} /> 
      <ReviewsFeedback navigator={this.props.navigator}/> 


     </DrawerLayoutAndroid> 
     </AfterInteractions> 
    ); 
    } 
    } 

Answer 1

この遅さは、開発環境では正常です。 console.logのような手順は、それが遅くなる原因になります。