从不在导航器中的视图导航到另一个堆栈导航器屏幕

时间:2017-10-08 09:56:27

标签: javascript react-native react-navigation stack-navigator

所以我有一个包含堆栈导航器和底部视图的视图。底部的视图用作页脚。目前我试图使用对堆栈导航器的引用,但它不起作用。如何从页脚视图触发StackNavigator视图中的屏幕导航?

enter image description here

  render() {
    return (
      <View style={styles.container}>

        /*This is the Stack Navigator*/
        <myNavigator.StackNavigation ref={(c)=>{this._stacky = c}} screenProps={{setNowPlaying:this.setNowPlaying.bind(this), 
        globalState:this.state,
        showFooterPlayer:this.showFooterPlayer.bind(this), 
        playPauseSong:this.playPauseSong.bind(this),
        seekToPosition:this.seekToPosition.bind(this)}}/>

        /*This is the footer section*/
        <TouchableOpacity onPress={()=>{console.log(this._stacky); this._stacky.navigation.navigate('Player')}} style={[styles.bottomFooterContainer, {height:this.state.showFooterPlayer?60: 0}]}>
          <Image style={styles.headerImage} source={{uri:this.state.nowPlaying.image}} resizeMode="cover" />
          <View style={styles.playerRight}>
             <Text style={styles.songTitle} ellipsizeMode="tail" numberOfLines={1}>{this.state.nowPlaying.title}</Text> 
            {/* <Text style={styles.songTitle}>{counter}</Text> */}
            <View style={styles.controlButtonsContainer}>
              <TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/previous.png')} resizeMode="cover" /></TouchableOpacity>
              <TouchableOpacity onPress={this.playPauseSong}><Image style={styles.controlButton} source={this.state.isPlaying?pauseImage: playImage} resizeMode="cover" /></TouchableOpacity>
              <TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/next.png')} resizeMode="cover" /></TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

0 个答案:

没有答案