需求:子组件跳转页面 或者需要根据接口的返回来跳转页面 虽然可以把this.props.navigation传过来 但是用多了就很麻烦 而且我也没有集成 redux 传递自己的navigation prop
我的解决方案 可以通过ref访问根目录,将其传递给我们用来导航的NavigationService。
操作:
先定义一个 NavigationService.js 文件
6.x
import { CommonActions, StackActions } from "@react-navigation/native";
let navigator;
function setTopLevelNavigator(navigatorRef) {
navigator = navigatorRef;
}
function navigate(routeName, params = {}) {
navigator.dispatch(
CommonActions.navigate({
name: routeName,
params: params,
})
);
}
function reset(routeName, params = {}) {
navigator.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: routeName,
params: params,
},
],
})
);
}
function replace(routeName, params = {}) {
navigator.dispatch(StackActions.replace(routeName, params));
}
function goBack() {
navigator.dispatch(CommonActions.goBack());
}
export default {
navigate,
replace,
reset,
goBack,
setTopLevelNavigator,
};
5.x及以下
import { CommonActions, StackActions } from '@react-navigation/native';
//5.x以下import { NavigationActions ,StackActions} from 'react-navigation';
let navigator;
function setTopLevelNavigator (navigatorRef) {
navigator = navigatorRef;
}
function navigate (routeName, params = {}) {
navigator.dispatch(
CommonActions.navigate({
name: routeName,
params: params
})
);
}
function reset (routeName) {
navigator.dispatch(
StackActions.replace(routeName)
)
// 5.x以下
// const resetAction = StackActions.reset({
// index: 0,
// actions: [NavigationActions.navigate({ routeName })]
// });
// navigation.dispatch(resetAction);
}
function goBack () {
navigator.dispatch(CommonActions.back());
}
export default {
navigate,
reset,
goBack,
setTopLevelNavigator
};
App.js
添加ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
// App.js
import NavigationService from './src/utils/NavigationService'
class App extends React.Component {
// ...
render() {
return (
<NavigationContainer ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}>
<Stack.Navigator>
<Stack.Screen name="index" component={index} />
<Stack.Screen name="Three" component={ThreeScreen} />
<Stack.Screen name="Four" component={FourScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
使用
import NavigationService from './NavigationService'
//跳转
NavigationService.navigate('Login');
//重置
NavigationService.reset('Login');