来自另一个文件的 React-Native 反应导航

Posted 2023-04-13

【中文标题】来自另一个文件的 React-Native 反应导航

【英文标题】：React-Native react-navigation from another file

【发布时间】：2018-05-19 00:08:47

【问题描述】：

我在 RN 中的导航有问题，所以我想你可以帮助我。我找不到任何方法从“设置”选项卡导航到“已签名”this is my repo，代码并不复杂，您只需在“导航”和“屏幕”文件夹中查看即可。事情是我的“设置”文件在一个文件“MainTabNavigator”中，而SignedOut 在“RootNavigation”中，当我尝试这样的事情时：

this.props.navigation.navigate("SignedOut");

什么都没发生，这是我的功能：

onSignOut()
.then(() => 
    console.log('Logout!');
    this.props.navigation.navigate("SignedOut");
)
.catch(e => 
    console.log(e);
)

我确实打印了此日志，因此它应该成功调用此导航方法。你有什么想法为什么？我的意思是，我认为这就是我在这里遗漏某些东西的原因？

这是我的 MainTabNavigator 的样子：

import React from 'react';
import  Platform  from 'react-native';
import  Ionicons  from '@expo/vector-icons';
import  TabNavigator, TabBarBottom, DrawerNavigator  from 'react-navigation';

import Colors from '../constants/Colors';

import HomeScreen from '../screens/HomeScreen';
import ListScreen from '../screens/ListScreen';
import SettingsScreen from '../screens/SettingsScreen';
import WordDetails from '../screens/WordDetails';
import DrawerMenu from './drawerDesign/Drawer';

export default DrawerNavigator(
  
    Home: 
      screen: HomeScreen,
    ,
    List: 
      screen: ListScreen,
    ,
    Settings: 
      screen: SettingsScreen,
    ,
    WordDetails: 
      screen: WordDetails,
    ,
  , 
    contentComponent: DrawerMenu,
    drawerWidth: 200,
    drawerPosition: "right",
    contentOptions: 
      activeTintColor: '#e91e63',
      itemsContainerStyle: 
        marginVertical: 0,
        opacity: 0.6

      ,
      iconContainerStyle: 
        opacity: 0.6
      ,
      style: 
        flex: 1,
        paddingTop: 35,
      ,
    
  
);

SingedOutNavigator：

import React from 'react';
import  Platform, StatusBar, Easing, Animated  from 'react-native';
import  Ionicons  from '@expo/vector-icons';
import  StackNavigator  from 'react-navigation';

import Colors from '../constants/Colors';

import SignIn from '../screens/SignInScreen';
import Register from '../screens/RegisterScreen';


const headerStyle = 
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    backgroundColor: '#2b303b',
;

export default StackNavigator(
    
        SignIn: 
            screen: SignIn,
            navigationOptions: 
                title: "Prijavi se",
                headerStyle,
                headerTitleStyle: 
                    color: '#f5f5f5'
                ,
            ,
        ,
        Register: 
            screen: Register,
            navigationOptions: 
                title: "Prijavi se",
                headerStyle,
                headerTitleStyle: 
                    color: '#f5f5f5'
                ,
            ,
        
    ,
    
        headerMode: "none",
        transitionConfig: () => (
            transitionSpec: 
                duration: 1000,
                easing: Easing.step0,
                timing: Animated.timing,
            ,
            screenInterpolator: sceneProps => 
                const  layout, position, scene  = sceneProps
                const  index  = scene

                const height = layout.initHeight
                const translateY = position.interpolate(
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [height, 0, 0],
                )

                const opacity = position.interpolate(
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                )

                return  opacity, transform: [ translateY ] 
            ,
        ),
    
);

从这个“设置”屏幕我想从“SignedOutNavigator”继续这个“登录”..

【问题讨论】：

你确定调用了RootNavigator的渲染吗？你能通过放置一个console.log或一个断点here来确认吗？

你是指当我第一次进入应用程序时还是当我按下按钮时？

当您按下按钮退出时。

不，它没有，如果我使用 redux 和全局状态“signedIn”，它可以解决问题...

@jkarr 非常感谢，我什至没有想过要检查..我做了一个简单的事件，当我点击按钮并将我的状态“SignedIn”更新为 false 时触发......如果你想要把它放在下面的评论中，我会将其标记为已完成且有帮助。

【参考方案1】：

据我了解，您正在构建一个应用程序，其中一些屏幕仅在用户登录时可用。

因此，当用户注销时，您应该清除导航历史记录，以使用户无法使用返回硬件按钮返回。

你应该这样做：

this.props.navigation.dispatch(NavigationActions.reset(
            index: 0, key: null, actions: [ NavigationActions.navigate( routeName: "SignedOut" ) ]
));

【讨论】：

我应该先定义 NavigationActions 吗？

@MarioRozic NavigationActions 由反应导航提供。查看documentation。它也有一些例子:)

哦，是的，我没有从模块中包含它......但它仍然没有重定向我：/

【参考方案2】：

我相信你需要在app.js 中声明屏幕。

import YOURSCREENfrom './src/screens/YOURSCREEN'

const Routes = 
    YOURSCREEN:  screen: YOURSCREEN

然后你可以拨打this.props.navigation.navigate("YOURSCREEN");

【讨论】：

ty 回复，但它不能解决我的问题 :(