Question

我正在使用react native路由器通量库，但是我想用动画打开一个新屏幕，如何从下到上或左或右添加屏幕过渡的动画。我的代码在这里：-

import React,{Component} from 'react';
import { Navigator} from 'react-native-deprecated-       custom-components';
import { Router ,Schema,Route, Scene, ActionConst, Lightbox} from 'react-native-router-flux';
import ScreenFirst from './etc/ScreenFirst';
import ScreenSecond from './etc/ScreenSecond';
import ScreenThird from './etc/ScreenThird';
import TestLB from './etc/TestLB';

export default class Router2 extends Component {

render() {
return (
    <Router >            
       <Scene>
            <Schema name='modal' sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
            <Schema name='default' sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
            <Route name='first' component={ScreenFirst} title='First Screen' initial={true} schema='modal'/>
            <Route name='second' component={ScreenSecond} title='Second Screen' schema='default'/>
            <Route name='third' component={ScreenThird} title='Third Screen' schema='modal'/>
            <Route name='testLB' component={TestLB} title='TestLB Screen' schema='default'/>
       </Scene>
    </Router>
    )
  }
}



{/* <Scene key='root' > 
<Scene key='first' component={ScreenFirst} initial=  {true} title='First Screen' />
<Scene key='second' component={ScreenSecond} title='Second Screen' direction='horizontal' duration={3000}/>
<Scene key='third' component={ScreenThird} title='Third Screen' />  
<Scene key='testLB' component={TestLB} title='Test LB'/> 
</Scene>     */}

Answer 1

对于带有屏幕的过渡，请使用反应导航。

 import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, View} from 'react-native';
 import { createAppContainer, createStackNavigator, StackNavigator } 
      from 'react-navigation';



 //fade Animation------------------------------------
 const FadeAnimation = (index,position) => {
   const sceneRange = [index-1,index];
   const outputOpacity = [0,1];
   const transition = position.interpolate({
     inputRange : sceneRange,
     outputRange : outputOpacity,
   });

   return {
     opacity : transition
   }
 }

 //Slide from Bottom Animation-------------------------------------
 const BottomTransition = (index,position,height) => {
   const sceneRange = [index-1,index,index+1];
   const outputOpacity = [height,0,0];
   const transition = position.interpolate({
     inputRange : sceneRange,
     outputRange : outputOpacity,
   });

   return {
     transform : [{translateY : transition}]
   }
 }

 //Slide from Left Animation---------------------------------
 const SlideTransition = (index,position,width) => {
   const sceneRange = [index-1,index,index+1];
   const outputOpacity = [width,0,0];
   const transition = position.interpolate({
     inputRange : sceneRange,
     outputRange : outputOpacity,
   });

   return {
     transform : [{translateX : transition}]
   }
 }


 //Navigation Config---------------------------------
 const NavigationConfig = () => {
   return {
     screenInterpolator : (sceneProps) => {
       const position = sceneProps.position;
       const scene  = sceneProps.scene;
       const index = scene.index;
       const height = sceneProps.layout.initHeight;
       const width = sceneProps.layout.initWidth;

      //return FadeAnimation(index,position)
      //return BottomTransition(index,position,height)
     return SlideTransition(index, position, width)
     }
   }
 }

 //Add Screens here-----------------------------------------------------
 const AppNavigator = createStackNavigator({
     Splash : {screen : Splash},
     SignIn : {screen : SignIn},
     SignUp1 : {screen : SignUp1},
     SignUp2 : {screen : SignUp2},
     Landing1 : {screen : Landing1},
     Landing2 : {screen : Landing2},

   },{
     transitionConfig : NavigationConfig,
     headerMode :'none',
     initialRouteName : 'Payment'
   },
 )

 export const AppContainer = createAppContainer(AppNavigator);

在React native中从一个屏幕转到另一个屏幕时，如何用动画进行屏幕过渡？

1 个答案: