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