2017-02-26 3 views
3

나는이 라이브러리 https://reactnavigation.org/docs/intro/을 사용하여 react-native로 안드로이드를 제작하고 있습니다. 네비게이션을 안드로이드 기기에서 할 수있게 만들지 만, 화면을 오른쪽에서 슬라이드시키고 왼쪽에서 사라지게 할 수있는 방법을 만들 수 있습니다. 이 문제는 iOS 기기에서 발생하지만 Android에서는 발생하지 않는 것으로 보입니다. Android 앱용 애니메이션 설정이 있습니까?React Navigation : Android 용 StackNavigator 전환

아래 애니메이션을 참조하십시오. 이것은 iOS에 기록됩니다. 더 나은

enter image description here

답변

0

당신은이에 대한 navigation을 기본 반응 사용할 수 있습니다. 당신은 configureScene 방법을 사용하여 화면을 구성 할 수 있습니다. 그 방법 안에는 Navigator.SceneConfigs을 사용하여 애니메이션 화면을 만듭니다. 그것은 안드로이드와 IOS 모두를위한 작품입니다.

+0

이 페이지는'https : // reactnavigation.org/docs/navigators/stack'에 대해 이야기하고 있습니까? Navigator.SceneConfigs 관련 설정을 찾지 못했습니다. –

+3

'react-navite '의 네비게이터가 더 이상 사용되지 않습니다. –

13

on this page으로 작성된 기본 화면 전환을 무시하려면 transitionConfig을 사용해야합니다. \react-navigation\lib\views\CardStackStyleInterpolator.js

그래서 코드는 다음과 같아야합니다 : 당신은에서 유용한 정보를 얻을 수 있습니다

const navigator = StackNavigator(scenes, { 
    transitionConfig:() => ({ 
     screenInterpolator: sceneProps => { 
      const { layout, position, scene } = sceneProps; 
      const { index } = scene; 

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

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

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

이것은 매우 도움이됩니다. 감사합니다. – Nathan

0

불행하게도 그 기능이 작동하지만이 파일의 몇 가지 예를 찾을 수있는 방법을 제공하는 더 예를 없다 index.d.ts 파일을 찾고 export interface TransitionConfig을 찾은 다음 NavigationTransitionSpecNavigationSceneRendererProps에 'Ctrl'& left_click을 누르면 원하는 모든 것을 얻을 수 있습니다.