reactjs - 使用 StackNavigator 将 Native 从子组件反应到父组件

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>

相关组件.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，但在同一页面。

标签： reactjsreact-native

Answer 1

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

相关组件.js

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

YoutubeVideo.js

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

您可以通过这种方式将数据发送给父级。我希望这能帮到您