Как вызвать навигатор извне навигатора?

Question

У меня есть панель вкладок в моем приложении, что я не хочу, чтобы переход на навигацию влиял каждый раз при визуализации нового маршрута. Поэтому я хочу разместить панель вкладок вне навигатора, но как я могу активировать действия навигации в этом случае? Я не могу получить доступ к объекту навигатора, который передается функции renderScene извне навигатора.

Вот что возвращается в 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> 

Answer 1

Я не думаю, что это лучший способ сделать то, что вы хотите. Но чтобы ответить на ваш вопрос:

  <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> 

И тогда вы могли бы назвать getNavigator() из вашего TabBar

Answer 2

Хорошо, я думаю, что я решил эту проблему. Проблема заключается в том, что 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.

Answer 3

Вот еще одна версия, которая сработала для меня. Это хак и, вероятно, перерыв в будущем, но может помочь, если вы в спешке;)

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

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