在 Android 上,我知道在使用 react-navigation-stack
库和 transitionConfig
道具时,可以将堆栈屏幕动画控制为水平。但是,它似乎不适用于 react-navigation/stack
库,或者说它没有任何支持。有没有人设法让它与 react-navigation/stack
一起工作?或者有什么方法可以将两个库结合起来,因为我会发现仅仅为了这个小问题而在另一个库中重写我的代码是一种浪费。任何帮助将不胜感激!
答案 0 :(得分:1)
像这样使用它 -
Youtube Tutorial for Navigation Gestures
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Easing } from 'react-native';
import {
createStackNavigator,
CardStyleInterpolators,
} from '@react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
const timingConfig = {
animation: 'timing',
config: {
duration: 200,
easing: Easing.linear,
},
};
const options = {
gestureEnabled: true,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
transitionSpec: {
open: timingConfig,
close: timingConfig,
},
};
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={options} />
<Stack.Screen
name="Notifications"
component={NotificationsScreen}
options={options}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={options}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={options}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}