Question

如何从子组件导航到父组件？

YoutubeVideo.js

        <YouTube
            videoId={this.state.VideoId}  
            play={false}             
            loop={false}            
            apiKey={apikey}
            onReady={e => this.setState({ isReady: true })}
            onChangeState={e => this.setState({ status: e.state })}
            onChangeQuality={e => this.setState({ quality: e.quality })}
            onError={e => this.setState({ error: e.error })}
            style={{ alignSelf: 'stretch', height: 250 }}
        />
        <Related videoId={this.state.VideoId}    />
      </View>

RelatedComponent.js

   <View>
   <ScrollView>
     <RkCard rkType='shadowed' >
        {this.state.data.map((item, i) => 
        <TouchableHighlight 
          key={item.id.videoId} 
      onPress={() => props.navigate('YoutubeVideo', {youtubeId:item.id.videoId})}>
          <View rkCardContent>
            <Image  rkCardImg
              source={{uri: item.snippet.thumbnails.medium.url}} 
              style={styles.image}/>
            <View style={styles.vidItems}>
              <Text style={styles.vidText}>{item.snippet.title}</Text>
              <Icon name='more-vert' size={20} color='#555'/> 
            </View>
          </View>
        </TouchableHighlight>
        )}
      </RkCard>
    </ScrollView>
  </View>

我想从相关视频发送新的YouTube ID，但其页面相同。

Answer 1

您无需再次导航到YoutubeVideo。您可以通过回调将videoID传递给父级，如下所示：

RelatedComponent.js

...
<TouchableHighlight  
    onPress={() => {this.props.onVideoClick(item.id.videoId)} }
>
...

YoutubeVideo.js

...
<Related 
     videoId={this.state.VideoId}    
     onVideoClick={(videoID) => { this.setState({ VideoId: 'videoID' }) }}
/>
...

您可以通过这种方式将数据发送给父级。希望对您有帮助

使用StackNavigator从子组件到父组件反应本机

1 个答案: