React native arbeitet sehr langsam auf Android

Question

Von 'Sehr langsam' ich meine, es lädt einen einzigen Übergang etwa 5 Sekunden, obwohl dies nur ein einfaches Beispiel App ist.

Here is the whole app RN code

Werfen Sie einen Blick auf onPressFeed

Answer 1

Welche Version von Native Reagieren sind Sie? Und auf welchem ​​Telefon läuft es?

Wenn Sie React Native auf einem Android-Emulator ausführen, wird es ziemlich langsam. Wenn Sie das Debugging von Chrome aktiviert haben, verlangsamt es die App erheblich.

Ich habe eine ziemlich einfache React Native App auf meinem Samsung Galaxy s4 Gerät laufen, und es läuft ziemlich schnell (Animationen laufen auch ziemlich reibungslos).

einige Beispiel-Code, den ich (eine sidedrawer und Hauptansicht mit Animation) laufen:

_renderCancel: function(){ 
    if (this.state.showView) { 
    return (
     this.props.view 
    ); 
    } else { 
    return ; 
    } 
}, 

render: function() { 

var menu = <Menu 
       closeDrawer={this.closeDrawer} 
       navigator={this.props.navigator} 
       modifyOnClose={this.modifyOnClose} />; 


return (
    <Drawer 
    ref="drawer" 
    onClose={this.onClose} 
    type={this.state.drawerType} 
    animation={this.state.animation} 
    openDrawerOffset={this.state.openDrawerOffset} 
    closedDrawerOffset={this.state.closedDrawerOffset} 
    panOpenMask={this.state.panOpenMask} 
    panCloseMask={this.state.panCloseMask} 
    relativeDrag={this.state.relativeDrag} 
    panStartCompensation={this.state.panStartCompensation} 
    openDrawerThreshold={this.state.openDrawerThreshold} 
    content={menu} 
    styles={drawerStyles} 
    disabled={this.state.disabled} 
    tweenHandler={this.tweenHandler} 
    tweenDuration={this.state.tweenDuration} 
    tweenEasing={this.state.tweenEasing} 
    acceptDoubleTap={this.state.acceptDoubleTap} 
    acceptTap={this.state.acceptTap} 
    acceptPan={this.state.acceptPan} 
    changeVal={this.state.changeVal} 
    negotiatePan={false} 
    side={this.state.rightSide ? 'right' : 'left'} 
    > 
    <View> 
     <CustomToolBar onPress={this.openDrawer}/> 
     {this._renderCancel()} 
    </View> 
    </Drawer> 

); 
}, 

dies ziemlich schnell auf meinem Gerät läuft.

Answer 2

Das ersparte mir eine Menge Zeit:

• Code Suche nach "console.log", und kommentieren sie vor dem Test.
• wollen Schalten Sie „JS Dev Mode“

Sie sicherstellen, dass Sie deaktivieren „JS Dev-Modus“, oder es sonst wird quälend langsam auf dem Gerät laufen. Diese

ist, wie Sie JS Dev-Modus auf Android deaktivieren:

Nach dem Ausführen „reagieren-native Lauf android“ Sie sollten „schütteln“ Ihr Gerät , um das Menü aufzurufen. Wählen Sie "Dev Settings" und deaktivieren Sie "JS Dev Mode".

Danach run "reagieren-native Lauf android" wieder, und es sollte mehr performant sein, zumindest hoffe ich für Sie :)

Quelle: https://github.com/aksonov/react-native-router-flux/issues/199