Реагируйте с навигацией: как обеспечить анимацию на экране с помощью StackNavigator

Question

Я хочу анимировать компоненты экрана при смене сцены.Можно ли ввести анимацию на экран?

class ScreenWithAnimation extends Component {
  render() {
    const { position } = this.props;
    const { index } = this.props.navigation.state;

    const style = {
        opacity: position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [0, 1],
        })
    };

    return (
        <View>
            <Text style={style}>Some text!</Text>
        </View>
    );
  }
}

Answer 1

Вы можете сделать это, создав собственную transitionerConfig.Я реализовал следующее, подправив несколько строк из самого кода реагирующей навигации.

let MyTransition = (props) => {
  const { layout, position, scene } = props;
  if (!layout.isMeasured) {
    return forInitial(props);
  }
  const interpolate = getSceneIndicesForInterpolationInputRange(props);

  if (!interpolate) return { opacity: 0 };

  const { first, last } = interpolate;
  const index = scene.index;
  const opacity = position.interpolate({
    inputRange: [first, first + 0.01, index, last - 0.01, last],
    outputRange: ([0, 1, 1, 0.85, 0])
});

  const width = layout.initWidth;
  const translateX = position.interpolate({
    inputRange: ([first, index, last]),
    outputRange: I18nManager.isRTL
        ? ([-width, 0, width * 0.3])
        : ([width, 0, width * -0.3]),
  });
  const translateY = 0;

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

const MyCustomTransition = (props) => {
  const { layout, position, scene } = props;
  const { index } = scene;

  const height = layout.initHeight;
  const translateY = position.interpolate({
    inputRange: [index - 1, index, index + 1],
    outputRange: [height, 0, 0],
  });

  const opacity = position.interpolate({
    inputRange: [index - 1, index - 0.99, index],
    outputRange: [0, 1, 1],
  });

  return { opacity, transform: [{ translateY }] }
};

const TransitionConfiguration = (param)=> {
  return {
    transitionSpec: {
      duration: 400,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: (sceneProps) => {
      const {scene} = sceneProps;
      const {route} = scene;
      const params = route.params || {};
      const transition = params.transition || 'default';
      return {
        myCustomTransition: MyCustomTransition(sceneProps),
        default: MyTransition(sceneProps),
      }[transition];
    }
  }
};

Теперь вы можете указать вышеуказанный конфиг в StackNavigator следующим образом: -

const MainNavigation = StackNavigator(
  {
    //routes
  },
  {
     transitionConfig: () => TransitionConfiguration(),
     // other config
  }
)