admin管理员组

文章数量:1633739

函数组件

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

navigation.goBack();

class组件

需要自己封装
主要运用的是ref

function App() {
const navigationRef = React.useRef(null);

return (
<View style={{ flex: 1 }}>
	<Button onPress={() => navigationRef.current?.navigate('Home')}>
		Go home
	</Button>
	<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
</View>
);
}

在这个基础上我们可以封装一个全局的navigationRef

参考 https://reactnavigation/docs/navigating-without-navigation-prop/

1.主页面 App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
	return (
	  <NavigationContainer ref={navigationRef}></NavigationContainer>
	);
}

2.RootNavigation.js 导出各种自己想要的方法

import * as React from 'react';
import { StackActions } from '@react-navigation/native';
export const navigationRef = React.createRef();
export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}
export function push(...args) {
  navigationRef.current?.dispatch(StackActions.push(...args));
}

3.在想要的class组件中获取

// any js module
import * as RootNavigation from './path/to/RootNavigation.js';

// ...

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

本文标签： 函数路由组件入口方法

版权声明：本文标题：React-native中怎么在函数组件或者入口函数中获得路由信息或方法？ 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729174586a1188555.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。