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

https://reactnavigation.org/docs/en/navigating.html


标签:React
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号