Question

我想从DrawerNav导航回Login。在函数内使用alert（＆＃39; Alert＆＃39;）就可以了。

我有一个带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')

Answer 1

问题

this中的this._logout用于引用一个CustomContent实例，但是由于CustomContent是一个功能组件（没有实例），因此任何{{ 1}}引用无效，但不会由于a bug而引发错误。

解决方案

更改

this

到

onPress={this._logout}

Answer 2

由于您的导航堆栈很深，使用popToTop函数不是很有意义吗？

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

通过将props传递给函数来更新函数调用
更新_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道具，并允许您在导航堆栈上进行调用。

Answer 3

将您的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>
    );
  }
}

Answer 4

注意： Best practice to implement auth screens通过使用switch navigator。如果您由于某种原因不使用它，则以下内容可能会有所帮助。

1：正如@Asrith KS回答的那样，将您的功能组件更改为类组件，并将_logout编写为类函数，其中this.props将具有navigation < / p>

（或）

2 ：将导航操作写为anonymous function。

const CustomContent = (props) => (
  <View>
    <DrawerItems {...props} />
    <TouchableOpacity
      onPress={ () => props.navigation.navigate("Login") }>
      <Text style={ styles.logout }>Logout</Text>
    </TouchableOpacity>
  </View>
)

在DrawerNavigator

4 个答案:

问题

解决方案