如何从内部组件 React Native 调用 App.js？答案

【问题标题】：How to invoke App.js from inner component ReactNative?如何从内部组件 React Native 调用 App.js？
【发布时间】：2017-12-20 05:41:02
【问题描述】：

我正在使用 StackNavigator 加载在 App.js 中使用 react-native-tab-navigator 创建的 Tabbar。我在 Tabbar 中有一个视图。如何从该视图导航回 App.js？

App.js

import { StackNavigator } from 'react-navigation';

const SigninSignup = StackNavigator({
  Signup: { screen: Signup },
  Signin: { screen: Signin },
});

 render() {
        if (this.state.condition) {
          return (<Tabbar />);
        } else {
          return (<SigninSignup />);
        }
    }

Myview.js（在 Tabbar 里面）

如何返回 App.js 并加载 SigninSignup ？

我试过了

 const { navigate } = this.props.navigation;
 navigate('Signin', {});

但得到错误undefined is not an object (evaluating 'this.props.navigation')

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您的导航层次结构以SigninSignup 导航器开头。

由于您的组件根据this.state.condition 渲染导航器或标签栏，因此您不能只将navigate 渲染到另一个屏幕。

您可以通过将标签栏和SigninSignup 导航器移动到新的根导航器中并使用它在所有内容之间导航来解决此问题，或者通过向Tabbar 提供一个函数来更改condition 的值：

<Tabbar onSomething={() => this.setState({condition: !this.state.condition})} />

【讨论】：