如何从导航器外部调用导航器？答案

【问题标题】：How do I call navigator from outside the Navigator?如何从导航器外部调用导航器？
【发布时间】：2017-01-05 14:46:23
【问题描述】：

我的应用程序中有一个标签栏，我不希望每次呈现新路线时导航转换都会影响。因此，我想将标签栏放在导航器之外，但在这种情况下如何触发导航操作？我无法访问从 Navigator 外部传递给 renderScene 函数的 navigator 对象。

这是 app.js 中返回的内容：

            <View>
                <Navigator
                    ref="navigator"
                    initialRoute={{name: "start"}}
                    renderScene={this.renderScene.bind(this)}
                    configureScene={this.configureScene.bind(this)}
                />
                <TabBar navigator={???} style={styles.nav} />
            </View>

【问题讨论】：

标签： react-native

【解决方案1】：

好的，我想我解决了这个问题。问题似乎是 refs 在组件的第一次渲染时不可用。我通过以下方式解决了这个问题：

<Navigator
    ref={(r) => { this.navigatorRef = r; }}
    initialRoute={{name: "start"}}
    renderScene={this.renderScene.bind(this)}
    configureScene={this.configureScene.bind(this)}
/>
{this.state ? <TabBar navigator={this.state.navigatorRef} style={styles.nav} /> : null }

并添加了这个：

componentDidMount() {
    this.setState({navigatorRef: this.navigatorRef});
}

只是为了让组件使用 TabBar 进行第二次渲染。

【讨论】：

【解决方案2】：

我认为这不是做你想做的最好的方式。但要回答你的问题：

            <View>
                <Navigator
                    ref="navigator"
                    initialRoute={{name: "start"}}
                    renderScene={this.renderScene.bind(this)}
                    configureScene={this.configureScene.bind(this)}
                />
                <TabBar getNavigator={()=>this.refs.navigator} style={styles.nav} />
            </View>

然后你可以从你的 TabBar 调用 getNavigator()

【讨论】：

导航器在TabBar中仍然未定义，你知道为什么吗？
尝试在TabBar组件中记录this.props.navigator
这就是我所做的，在那里没有定义
@theva 这里是另一种方法。

【解决方案3】：

这是另一个对我有用的版本。它很老套，将来可能会崩溃，但如果你赶时间可能会有所帮助；）

<View>
  <Navigation
    ref={(r) => { this.navigation = r }}
  />

  <OtherScreen
    navigation={(this.navigation || {})._navigation}
    {...this.props}
  />
</View>

【讨论】：