8

我想从 DrawerNav 导航回 Login。在函数内部使用 alert('Alert') 是可以的。

我有一个带有 Login 和 DrawerNav 的 StackNavigator

const MyStackNavigator = StackNavigator({
  Login : { screen : Login },
  DrawerNav : { screen : DrawerNav }
  }, {
    navigationOptions : { header : false }
  }
);

从登录我可以导航到我的主屏幕 DrawerNav 使用

_login = () => {
  this.props.navigation.navigate('DrawerNav');
}

DrawerNav 内部是一个 DrawerNavigator（显然）

const MyDrawerNavigator = DrawerNavigator({
    ... screens ...
  }, {
    initialRouteName : '',
    contentComponent : CustomContent,
    drawerOpenRoute : 'DrawerOpen',
    drawerCloseRoute : 'DrawerClose',
    drawerToggleRoute : 'DrawerToggle'
  }
);

const CustomContent = (props) => (
    <View>
      <DrawerItems {...props} />
      <TouchableOpacity
        onPress={ this._logout }>
        <Text style={ styles.logout }>Logout</Text>
      </TouchableOpacity>
   </View>
)

如您所见，注销不是菜单的一部分，而是在抽屉内

_logout = () => {
  this.props.navigation.navigate('Login');
}

这给了我一个错误

undefined is not an object (evaluating '_this.props.navigation')
4

4 回答 4

1

popToTop由于您在导航堆栈中非常深入，因此使用该功能是否有意义？

在同一个文件中确保将_logout函数定义为 your CustomContent，然后您可以执行以下操作：

  1. props通过传递给它们来更新函数调用
  2. 更新_logout使用popToTop()

这是我的代码的外观。

_logout = (props) => {
  props.navigation.popToTop();
}

const CustomContent = (props) => (
    <View>
      <DrawerItems {...props} />
      <TouchableOpacity
        onPress={ () => this._logout(props) }>
        <Text style={ styles.logout }>Logout</Text>
      </TouchableOpacity>
   </View>
)

您需要将 传递props给该函数，因为该函数将包含您的navigation道具并允许您在导航堆栈上进行调用。

于 2019-02-03T20:51:35.857 回答
0

将您的 customComponent 从functional.Like ..更改为类组件

class CustomContent extends Component {
  _logout = () => {
    const resetAction = NavigationActions.reset({
      key: null,
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'Login' })],
    });
    this.props.navigation.dispatch(resetAction);
  }
  render() {
    return (
      <View>
        <DrawerItems {...props} />
        <TouchableOpacity
          onPress={this._logout}
        >
          <Text style={styles.logout}>Logout</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
于 2019-02-05T05:12:41.020 回答
0

注意： 实现身份验证屏幕的最佳实践是使用switch navigator。如果您由于某种原因不应该使用它，以下内容可能会有所帮助。

1：正如@Asrith KS 回答的那样，将您的功能组件更改为类组件并编写_logout为类函数，那里this.props会有navigation

（或者）

2：将导航动作编写为匿名函数。

const CustomContent = (props) => (
  <View>
    <DrawerItems {...props} />
    <TouchableOpacity
      onPress={ () => props.navigation.navigate("Login") }>
      <Text style={ styles.logout }>Logout</Text>
    </TouchableOpacity>
  </View>
)
于 2019-02-07T08:25:49.180 回答
0

问题

thisinthis._logout用于引用CustomContent实例，但由于是CustomContent功能组件（没有实例），因此任何this引用都不应是有效的，但不会因错误而引发错误。

解决方案

改变

onPress={this._logout}

至

onPress={() => props.navigation.navigate('Login')}
于 2019-02-01T18:40:39.703 回答