你能成为任何你想成为的人
0%

react navigation的使用技巧

发表于 更新于

因为库的限制，想实现某些页面使用某种动画还是很难的，本方法可以通过传递参数决定某页面的跳转动画。

《一》react navigation指定跳转动画

react-navigation根据平台的不同内置了相应的跳转动画

1
2
3
4
5
forHorizontal, //从右向左
forVertical, //从下向上
forFadeFromBottomAndroid, //安卓那种的从下向上
forFade, //淡出
canUseNativeDriver,

代码实现

在路由配置中增加如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const TaskPage = StackNavigator({
    TaskPage: {screen: _TaskPage,
    },
    TaskDetail:{screen: TaskDetail,
    },
    LoginPage:{screen: BaseLoginPage,
    },
    MyFavourite:{screen: MyFavourite,
    },
    LogWork:{screen:LogWork
    },

},{
    initialRouteName: 'TaskPage',
    mode: 'card ',
    headerMode: 'none',
    //解决安卓push无效果,并通过transition参数指定跳转动画,默认forHorizontal
    transitionConfig:() => ({
        screenInterpolator: (sceneProps) => {
            const { scene } = sceneProps;
            const { route } = scene;
            const params = route.params || {};
            const transition = params.transition || 'forHorizontal';
            return CardStackStyleInterpolator[transition](sceneProps);
        },
    })
});

在需要自定义跳转动画的地方传参数给路由：

1
2
3
4
//通过参数transition，指定跳转动画
titleBack=(e,navigate)=>{
	navigate('MyFavourite',{ transition: 'forVertical' })
}

《二》react navigation路由，指定页面不显示底部tabbar

大部分的页面都是TabNavigator嵌套着StackNavigator的，默认的所有页面都会在底部显示tabbar，我们可以在单个页面配置navigationOptions，来控制是否要显示底部模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class TaskDetail extends Component {
	//去除底部tabbar
    static navigationOptions = {
        tabBarVisible:false,
    };
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            bugData:{}
        };
      }
	  .
	  .
	  .

《三》防快速点击跳转异常（待优化）

修改node_modules/react-navigation/scr/addNavigationHelpers.js
注释部分为原版的，不放心可以改回来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/**
 * @flow
 *
 * Helpers for navigation.
 */

import type {
  NavigationProp,
  NavigationParams,
  NavigationScreenProp,
  NavigationNavigateAction,
} from './TypeDefinition';

import NavigationActions from './NavigationActions';
import invariant from './utils/invariant';

// export default function<S: {}>(
//   navigation: NavigationProp<S>
// ): NavigationScreenProp<S> {
//   return {
//     ...navigation,
//     goBack: (key?: ?string): boolean => {
//       let actualizedKey: ?string = key;
//       if (key === undefined && navigation.state.key) {
//         invariant(
//           typeof navigation.state.key === 'string',
//           'key should be a string'
//         );
//         actualizedKey = navigation.state.key;
//       }
//       return navigation.dispatch(
//         NavigationActions.back({ key: actualizedKey })
//       );
//     },
//     navigate: (
//       routeName: string,
//       params?: NavigationParams,
//       action?: NavigationNavigateAction
//     ): boolean =>
//       navigation.dispatch(
//         NavigationActions.navigate({ routeName, params, action })
//       ),
//     /**
//      * For updating current route params. For example the nav bar title and
//      * buttons are based on the route params.
//      * This means `setParams` can be used to update nav bar for example.
//      */
//     setParams: (params: NavigationParams): boolean => {
//       invariant(
//         navigation.state.key && typeof navigation.state.key === 'string',
//         'setParams cannot be called by root navigator'
//       );
//       const key = navigation.state.key;
//       return navigation.dispatch(NavigationActions.setParams({ params, key }));
//     },
//   };
// }
export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
    // 添加点击判断
    let debounce = true;
    return {
        ...navigation,
        goBack: (key?: ?string): boolean =>
            navigation.dispatch(
                NavigationActions.back({
                    key: key === undefined ? navigation.state.key : key,
                }),
            ),
        navigate: (routeName: string,
                   params?: NavigationParams,
                   action?: NavigationAction,): boolean => {
            if (debounce) {
                debounce = false;
                navigation.dispatch(
                    NavigationActions.navigate({
                        routeName,
                        params,
                        action,
                    }),
                );
                setTimeout(
                    () => {
                        debounce = true;
                    },
                    3000,//增加延迟
                );
                return true;
            }
            return false;
        },
        /**
         * For updating current route params. For example the nav bar title and
         * buttons are based on the route params.
         * This means `setParams` can be used to update nav bar for example.
         */
        setParams: (params: NavigationParams): boolean =>
            navigation.dispatch(
                NavigationActions.setParams({
                    params,
                    key: navigation.state.key,
                }),
            ),
    };
}