用react-navigation的同學是不是經(jīng)常遇到多次點擊會跳轉(zhuǎn)多次的bug,查詢了下,有網(wǎng)友給出了改源碼延時的方法,有的給出攔截的方法,我這邊也有一種方式可以參考.基本原理也是攔截,但是只要幾行代碼,而且不用改源碼.
代碼如下:
import React from "react";
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator ,NavigationActions } from 'react-navigation';
import { Constants } from 'expo';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
//主要是這一步
const navigateOnce = (getStateForAction) => (action, state) => {
const {type, routeName} = action;
return (
state &&
type === NavigationActions.NAVIGATE &&
routeName === state.routes[state.routes.length - 1].routeName
) ? null : getStateForAction(action, state);
};
在V2以上的版本,需要這么改,感謝[KingTortoise]同學指出: (type === NavigationActions.NAVIGATE || type === StackActions.PUSH)
//這是第二步
SimpleApp.router.getStateForAction = navigateOnce(SimpleApp.router.getStateForAction);
export default class App extends React.Component {
render() {
return (
<View>
<Text>Im App</Text>
<SimpleApp />
</View>
);
}
}
