Question

我使用的是本机v0.49，我尝试在导航到其他页面时实现自定义转换。我试图做的只是为场景2到场景3的一个场景进行过渡。但不是所有的应用程序。这个例子我发现它适用于所有网络，所以我想只为一个屏幕和所有应用程序制作，因为如果我这样做，它将影响所有的应用程序，它不是我和＃39 ;我正在寻找。任何想法？

    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,
   }
);

最后，当您导航时，只需在导航时添加参数：

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

反应原生导航自定义动画过渡

1 个答案: