Question

如何禁用react-native-router-flux动画？

我尝试添加transitionConfig，但它不起作用。 react-native-router-flux的版本为 4.0.0-beta.21

场景如下：

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>
);

有什么想法吗？

Answer 1

我一个月前尝试过同样的事情，我使用

解决了这个问题

duration={0}

在主要组件上或您想要的特定场景上。试试这个并告诉我们

Answer 2

我使用router-flux的旧版本，但我使用getSceneStyle来处理转换，如下所示：

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 },
    ],
  };
}

Answer 3

我用

解决了

DistinctBy

如何从反应本机路由器磁通中删除动画

3 个答案: