私はreactnative v0.49を使用しており、他のページに移動するときにカスタムトランジションを実装しようとしています。私がやろうとしているのは、シーン2からシーン3への1つのシーンのみを遷移させることです。ただし、すべてのアプリが対象というわけではありません。この例では、すべてのWeb向けであることがわかったので、1つの画面とすべてのアプリ用に作成したいと思います。そうすると、すべてのアプリに影響し、探しているものではないためです。何か案が？
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>
)
}
これが私たちのやり方の例です。あなたはそれをあなた自身のものにするためにあなた自身のトランジションを追加することができます。私たちの目標は、焼き付けられたトランジション構成を公開して、アニメーションをより細かく制御できるようにすることでした。移行構成：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' })
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加