2017-09-22 16 views
2

Wie kann ich Animationen von react-native-router-flux deaktivieren?So entfernen Sie Animation aus reagieren native Router Flux

Ich versuchte mit transitionConfig hinzufügen, aber es funktioniert nicht. Die Version von react-native-router-flux ist 4.0.0-beta.21

Die Szenen sind wie folgt:

const transitionConfig =() => ({ 
    transitionSpec: { 
     duration: 0, 
     timing: Animated.timing, 
     easing: Easing.step0, 
    }, 
}); 

const Entry =() => (
    <Router getSceneStyle={getSceneStyle} createReducer={reducerCreate} transitionConfig={transitionConfig}> 
     <Scene key="root"> 
      <Scene key="scene_login" 
        component={Login} 
        title={gettext("Login")} 
        initial={true} 
        type="reset" 
        hideTabBar 
        hideNavBar 
        navigationBarStyle={styles.navBarStyle} 
        titleStyle={styles.navBarTitleStyle} />      
      <Scene key="scene_condition" 
        tabs={true} 
        type="reset" 
        tabBarStyle={styles.tabBarStyle} 
        tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} 
        navigationBarStyle={styles.navBarStyle} 
        titleStyle={styles.navBarTitleStyle} 
        hideTabBar={false} 
        hideNavBar={true} 
        tabBarPosition="bottom" 
        labelStyle={{fontSize: 7}} 
        title=""> 
       <Scene key="scene_condition_car" 
         tabBarLabel={gettext("Model")} 
         title={gettext("Model")} 
         component={Car} 
         icon={TabIcon} 
         iconTittleHidden 
         iconName="directions-car" 
         leftButtonIconStyle={styles.moduleButton} 
         leftButtonImage={require('./img/icons/left.png')} 
         onLeft={(props) => requestOverview(props.request.id)} 
         navigationBarStyle={styles.navBarStyle} 
         titleStyle={styles.navBarTitleStyle}/> 
       <Scene key="scene_condition_checks_features" 
         tabBarLabel={gettext("Equipment")} 
         title={gettext("Equipment")} 
         component={Equipment} 
         icon={TabIcon} 
         iconTittleHidden 
         iconName="playlist-add-check" 
         leftButtonIconStyle={styles.moduleButton} 
         leftButtonImage={require('./img/icons/left.png')} 
         onLeft={(props) => requestOverview(props.request.id)} 
         navigationBarStyle={styles.navBarStyle} 
         titleStyle={styles.navBarTitleStyle}/> 
       <Scene key="scene_condition_specs" 
         tabBarLabel={gettext("Specifications")} 
         title={gettext("Specifications")} 
         labelStyle={{fontSize: 18}} 
         component={CarSpecs} 
         icon={TabIcon} 
         iconTittleHidden 
         iconName="control-point-duplicate" 
         leftButtonIconStyle={styles.moduleButton} 
         leftButtonImage={require('./img/icons/left.png')} 
         onLeft={(props) => requestOverview(props.request.id)} 
         navigationBarStyle={styles.navBarStyle} 
         titleStyle={styles.navBarTitleStyle}/> 
      </Scene> 
     </Scene> 
    </Router> 
); 

Jede Idee?

Antwort

1

habe ich versucht, das einen Monat gleiche vor und i löste es durch

duration={0} 

auf die Hauptkomponente oder auf die spezifischen Szenen, die Sie verwenden möchten. Versuchen Sie dies und lassen Sie uns wissen

+0

ich es schon versucht, aber es hat nicht geholfen. – Boky

+0

mein Vorschlag in diesem Fall ist, zurück zu einer stabileren Version auf, was Sie brauchen, und ich schlage @ 3.38.0 vor. Das wäre, was ich tun würde –

1

Ich bin auf einer älteren Version von router-flux, aber ich nutzen getSceneStyle die Übergänge zu handhaben, etwa so:

export function noAnimation(props): Object { 
    const { 
    // layout, 
    position, 
    scene, 
    } = props; 

    const index = scene.index; 
       // [willGainFocus, isFocused, lostFocus] 
    const inputRange = [index - 1, index, index + 1]; 
    // const height = layout.initHeight; 

    const opacity = position.interpolate({ 
    inputRange, 
    outputRange: ([1, 1, 1]: Array<number>), 
    }); 

    const scale = position.interpolate({ 
    inputRange, 
    outputRange: ([1, 1, 1]: Array<number>), 
    }); 

    const translateX = 0; 
    const translateY = position.interpolate({ 
    inputRange, 
    outputRange: ([0, 0, -0]: Array<number>), 
    }); 

    return { 
    opacity, 
    transform: [ 
     { scale }, 
     { translateX }, 
     { translateY }, 
    ], 
    }; 
} 
+0

(übergeben Sie einfach diese Funktion zu 'getSceneStyle') –

Verwandte Themen