Wie rufe ich den Navigator von außerhalb des Navigators auf?

Question

Ich habe eine Tab-Leiste in meiner Anwendung, die nicht den Navigationsübergang jedes Mal auswirken soll, wenn eine neue Route gerendert wird. Daher möchte ich die Tab-Leiste außerhalb des Navigators platzieren, aber wie trigge ich in diesem Fall die Navigationsaktionen an? Ich kann nicht auf das Navigatorobjekt zugreifen, das von außerhalb des Navigators an die renderScene-Funktion übergeben wird. Hier

ist das, was in app.js zurückgegeben:

  <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

Ich glaube nicht, dass dies der beste Weg ist, zu tun, was Sie wollen. Aber um Ihre Frage zu beantworten:

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

Und dann könnte man getNavigator() von Ihrem TabBar-

Answer 2

Ok nennen, ich glaube, ich dieses Problem gelöst. Das Problem scheint zu sein, dass die Refs beim ersten Rendern der Komponente nicht verfügbar sind. Ich löste dies durch:

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

und fügte hinzu, die diese:

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

nur die Komponente machen ein zweites Mal mit dem TabBar- machen.

Answer 3

Hier ist eine andere Version, die für mich arbeitete. Es ist hackish und wird wahrscheinlich in Zukunft brechen könnte aber helfen, wenn Sie in Eile sind;)

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

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