は、私が使用しているネイティブのナビゲーションカスタムアニメーションの移行

Question

を反応させネイティブv0.49を反応させて、私は他のページに移動するときにカスタムトランジションを実装しようとしています。 私がやろうとしていることだけでシーン2からscene3の1つのシーンの移行を作ることです。すべてのアプリではありません。 この例では、私はちょうど1画面分、私はそのように行うならば、それはすべてのアプリのために影響しますので、すべてのアプリを作りたい、それは私が探しているものではないですので、それはすべてのWebのためだ見つけました。何か案が？

class SceneOne extends Component { 
    render() { 
     return (
      <View> 
       <Text>{'Scene One'}</Text> 
      </View> 
     ) 
    } 
} 
class SceneTwo extends Component { 
    render() { 
     return (
      <View> 
       <Text>{'Scene Two'}</Text> 
      </View> 
     ) 
    } 
} 


let AppScenes = { 
    SceneOne: { 
     screen: SceneOne 
    }, 
    SceneTwo: { 
     screen: SceneTwo 
    }, 


SceneThree: { 
      screen: SceneTwo 
     }, 
} 

let MyTransition = (index, position) => { 
    const inputRange = [index - 1, index, index + 1]; 
    const opacity = position.interpolate({ 
     inputRange, 
     outputRange: [.8, 1, 1], 
    }); 

    const scaleY = position.interpolate({ 
     inputRange, 
     outputRange: ([0.8, 1, 1]), 
    }); 

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


let TransitionConfiguration =() => { 
    return { 
     // Define scene interpolation, eq. custom transition 
     screenInterpolator: (sceneProps) => { 

      const {position, scene} = sceneProps; 
      const {index} = scene; 

      return MyTransition(index, position); 
     } 
    } 
}; 

class App extends Component { 
    return (
     <View> 
      <AppNavigator /> 
     </View> 
    ) 
} 

Answer 1

ここでは例を示します。独自のトランジションを追加して独自のトランジションを作成できます。私たちの目標は、焼き付けられたトランジション構成を公開してアニメーションをより詳細に制御することでした。私たちのトランジションの設定：https://gist.github.com/jasongaare/db0c928673aec0fba7b4c8d1c456efb6

次に、あなたのStackNavigatorでは、そのようにその設定を追加します。

StackNavigator(
    { 
    LoginScreen: { screen: LoginScreen }, 
    HomeScreen: { screen: HomeScreen }, 
    }, 
    { 
    stateName: 'MainStack', 
    initialRouteName: 'HomeScreen', 
    initialRouteParams: { transition: 'fade' }, 
    transitionConfig: TransitionConfig, 
    } 
); 

を最後に、あなたが移動するとき、ちょうどあなたが移動するとき、あなたのparamsを追加します。

this.props.navigation.navigate('HomeScreen', { transition: 'vertical' })