>
반응 네이티브에서 기본 탐색 애니메이션을 변경하는 방법이 있습니까? iOS에서는 오른쪽에서 왼쪽으로 스 와이프합니다. 안드로이드 하단에서 상단. 우리는 두 플랫폼 모두에 대해이 콘스탄스를 만들 수 있습니까? 많은 감사합니다

  • 답변 # 1

    화면에 대해 다른 모드를 설정할 수 있습니다. 그 중 하나는 modal 입니다. :

    const MainStackNavigator = createStackNavigator(
      {
        SplashScreen: { screen: SplashScreen },
        OnBoardingScreen: { screen: OnBoarding },
        LoginScreen: { screen: LoginContainer },
      },
      {
        navigationOptions: {
          header: null
        },
        mode: "modal",
        cardStyle: { backgroundColor: "transparent" },
       transitionConfig: TransitionConfiguration,
      }
    );
    
    

    transitionConfig 를 사용할 수도 있습니다 두 매개 변수 transitionSpec 를 가진 객체를 반환합니다.  그리고 screenInterpolator . screenInterpolator의 transitionSpec 및 레이아웃 변환에서 지속 시간 및 여유와 같은 애니메이션 타이밍 속성을 구성 할 수 있습니다. 예를 들면 다음과 같습니다.

       const TransitionConfiguration = () => {
      return {
        transitionSpec: {
          duration: 750,
          easing: Easing.out(Easing.poly(4)),
          timing: Animated.timing,
          useNativeDriver: true,
        },
        screenInterpolator: (sceneProps) => {
          const { layout, position, scene } = sceneProps;
          const width = layout.initWidth;
          const { index, route } = scene
          const params = route.params || {}; // <- That's new
          const transition = params.transition || 'default'; // <- That's new
          return {
            collapseExpand: CollapseExpand(index, position),
            default: SlideFromRight(index, position, width),
          }[transition];
        },
      }
    }
    
    

    기본적으로 새 화면은 오른쪽에서 슬라이드합니다.

    let SlideFromRight = (index, position, width) => {
      const inputRange = [index - 1, index, index + 1];
      const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [width, 0, 0]
      })
      const slideFromRight = { transform: [{ translateX }] }
      return slideFromRight
    };
    
    

    와이즈 비즈에는 특별한 것이 없습니다 . 사실, 그것은 표준 React Native Animated 예제와 비슷합니다. 전환 기간과 여유 프로파일을 설정하고 스프링이 아닌 타이밍 기반 애니메이션으로 구성하고 성능을 위해 기본 드라이버를 사용합니다.

    screenInterpolator는 마법이 일어나는 곳입니다. screenInterpolator는 SceneProps라는 인수로 React Navigation 호출 기능입니다. 스택의 각 화면에 대해 screenInterpolator (sceneProps)가 호출되며 반환 값은 전환을 구성하는 데 사용됩니다.

    탐색 (장면)에 param {transition : 'collapseExpand'} 화면 보간 기의 CollapseExpand 애니메이션이있는 경우

    transitionSpec
    
    

    let CollapseExpand = (index, position) => { const inputRange = [index - 1, index, index + 1]; const opacity = position.interpolate({ inputRange, outputRange: [0, 1, 1], }); const scaleY = position.interpolate({ inputRange, outputRange: ([0, 1, 1]), }); return { opacity, transform: [ { scaleY } ] }; };

관련 자료

  • 이전 TYPO3의 Basic2 열에 대한 백엔드 레이아웃 및 입력 체계가 작동하지 않습니다
  • 다음 android - 조각 내부의 뷰에 영향을 미치는 문제