react-native之navigation.navigate 在 native react 中不起作用
rubylouvre
阅读:108
2025-06-02 22:19:02
评论:0
我正在创建过滤页面屏幕。在这个屏幕上,一旦我填写了我想要过滤数据的所有数据,我将点击保存按钮,这会将我重定向到我的新过滤数据所在的主页显示。我的主页已经显示了一般数据,但如果我想查看过滤数据,那么我将从过滤屏幕中过滤该数据。
但在这里我有问题是我无法重定向到主页。我用于重定向的代码对于我的整个应用程序都是相同的,它工作得很好。我只是在重定向到主页时遇到问题,并且控制台中没有显示错误,但是打印了我在我的函数中编写的消息。而不是什么都不做。
import NavigationService from '../../components/NavigationService';
onSaveClicked() {
console.log('Filter is in progress');
const { navigation } = this.props;
navigation.navigate('home');
const { userprofile } = this.props;
const { type } = userprofile;
NavigationService.navigate('HomeStackScreen1', {type:type});
}
renderButton() {
return (
<Button
style={{ alignItems: 'center' }}
onPress={this.onSaveClicked.bind(this)}
>
Filter
</Button>
);
}
导航服务.js
import { NavigationActions,navigation } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params
})
);
}
function getParams(param){
console.log("param: "+param);
_navigator.dispatch(
console.log("param: "+param),
navigation.getParam(param)
);
}
export default { setTopLevelNavigator, navigate, getParams };
导航堆栈:
const HomeStack = createStackNavigator(
{
HomeStackScreen1: {
screen: DrawerNavigation,
navigationOptions: ({ navigation }) => ({
title: 'Action',
headerLeft: (
<DrawerButton name="navicon" style={styles.Headercss} navigation={navigation} />
),
headerRight: (
<SearchButton style={styles.Headercss} navigation={navigation} />
),
//headerStyle: { paddingRight: 5, paddingLeft: 5 },
headerTitleStyle: { color: 'rgb(234, 94, 32)' }
})
},
Project: {
screen: ProjectTab,
navigationOptions: () => ({
title: ' Create New Project',
headerTintColor: 'rgb(234, 94, 32)',
})
},
Notification: {
screen: NotificationScreen
},
Filters: {
screen: FilterScreen,
navigationOptions: () => ({
title: 'Filter',
headerTintColor: 'rgb(234, 94, 32)',
})
},
UpdateProfile: {
screen:UserProfileScreen,
navigationOptions: () => ({
title: 'Profile',
headerTintColor: 'rgb(234, 94, 32)',
})
},
ViewActorProfile: {
screen: ViewActorProfileScreen,
navigationOptions: () => ({
title: 'View Profile',
headerTintColor: 'rgb(234, 94, 32)',
})
},
ViewProducer :{
screen: ViewProducerProfile,
navigationOptions: () => ({
title: 'View Profile',
headerTintColor: 'rgb(234, 94, 32)',
})
},
ProjectView: {
screen: ViewProject,
navigationOptions: () => ({
title: 'View Project',
headerTintColor: 'rgb(234, 94, 32)',
})
},
AppliedProjectScreen: {
screen: AppliedProjectUsers,
navigationOptions: () => ({
title: 'Applied Users',
headerTintColor: 'rgb(234, 94, 32)',
})
},
ChattingScreen: {
screen: Chat,
navigationOptions: {
title: 'Chat'
}
},
ViewActorProfileScreen: {
screen: ViewActorProfileScreen,
navigationOptions: () => ({
title: 'View Profile',
headerTintColor: 'rgb(234, 94, 32)',
})
}
},
{
initialRouteName: 'HomeStackScreen1',
headerMode: 'screen'
}
);
请您参考如下方法:
您必须使用确切的主路线名称作为导航参数:
navigation.navigate('HomeStackScreen1');
如果需要,您还可以将导航堆栈上的 HomeStackScreen1 重命名为 Home。
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。



