每个屏幕的 React-Native 自定义事务动画

Question

我希望每个屏幕都有自定义事务动画 例如A->B差异B->C。

我发现：https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions

但我不知道如何使用它： this.props.navigation.navigate('SearchVideo'，{keywork：keywork}(

有人可以帮助我吗？

Answer 1

如果您使用react-navigation，则可以使用StackNavigator的transitionConfig自定义屏幕过渡。原始来源在这里。但是，它无法知道上一个屏幕，因此您只能根据当前屏幕的信息进行自定义。

过渡到 B 的示例是左 => 右，过渡到 C 是 top=>bottom：

const myNavigator = StackNavigator(
{
A: { screen: A },
B: { screen: B },
C: { screen: C }
},
transitionConfig: () => ({
screenInterpolator: screenProps => {
const { layout, position, scene } = sceneProps
const { index, route: { routeName } } = scene
const width = layout.initWidth
const height = layout.initHeight
let translateX = 0
let translateY = 0
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
})
switch (routeName) {
case 'B':
translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [-width, 0, 0],
})
break;
case 'C':
default:
translateY = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [-height, 0, 0],
})
}
return {
opacity, transform: [
{ translateX },
{ translateY }
]
}
}  
})
)