react-native react-navigation5.x 页面进入动画从右到左设置
在options中设置cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS即可options={{cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,}}import React from 'react';import {NavigationContai
·
在options中设置cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS即可
options={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {
createStackNavigator,
CardStyleInterpolators,
} from '@react-navigation/stack';
import Home from './pages/home';
import ReservePlan from './pages/reservePlan/index';
import DangerIndex from './pages/danger/index';
import ReserveDetail from './pages/reservePlan/detail';
const Stack = createStackNavigator();
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
initialRouteName: 'Home',
};
}
render() {
const {initialRouteName} = this.state;
return (
<NavigationContainer>
<Stack.Navigator headerMode="none" initialRouteName={initialRouteName}>
<Stack.Screen
name="Home"
options={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
component={Home}
/>
<Stack.Screen
name="ReservePlan"
options={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
component={ReservePlan}
/>
<Stack.Screen
name="DangerIndex"
options={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
component={DangerIndex}
/>
<Stack.Screen
name="ReserveDetail"
options={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
component={ReserveDetail}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default Index;
更多推荐
所有评论(0)