当我导航到另一个布局时，视频仍在播放

Question

我使用Expo创建了我的项目。我浏览与react-native-router-flux该基地布局上react-navigation

我要嵌入YouTube的ID，我发现，世博会不支持YouTube的API，所以我尝试使用WebView。

这里是我的WebView代码：

  <WebView 
       source={{ uri: 'https://www.youtube.com/embed/2B_QP9JGD7Q' }} 
       style={{ flex: 1 }} 
       javaScriptEnabled 
       scalesPageToFit 
       startInLoadingState 
      /> 

它可以工作，但是当我尝试导航另一个布局，视频仍然在播放的背景...

如何停止视频时我导航到另一个布局？或onPause像Android一样的布局。 为什么它可以停止自动？

这里是我的环境：

"dependencies": { 
    "expo": "^19.0.0", 
    "firebase": "^4.2.0", 
    "lodash": "^4.17.4", 
    "react": "16.0.0-alpha.12", 
    "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz", 
    "react-native-router-flux": "^3.41.0", 
    "react-native-youtube": "^1.0.0-beta.3", 
    "react-redux": "^5.0.6", 
    "redux": "^3.7.2", 
    "redux-thunk": "^2.2.0" 
    }, 

任何帮助，将不胜感激。提前致谢。

Answer 1

我也在寻找一个很好的答案。

现在我用它得到了最近添加这些新方法反应导航https://reactnavigation.org/docs/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

我设置，通过它我更新状态，并设置时willBlur叫，这样的状态变量当屏幕呈现我返回一个空的视图。

编辑：由于这对于react-native-router-flux具体来说，这还没有在最后我检查的框架中实现。我会继续关注这个问题https://github.com/aksonov/react-native-router-flux/issues/2298

早期react-native-router-flux基于其他导航解决方案，因此它具有针对给定问题实现的onExit和onEnter函数。正如我前面所述，我们可以使用这些函数来实现状态更改变量。

注意：这不尚未与最新react-native-router-flux v4工作。看看关联的问题。

下面的代码片段展示了它（你可以用助焊剂变量工作）：

import React, { Component } from 'react'; 
import { View, Text, StyleSheet, Button, WebView } from 'react-native'; 
import { Scene, Router, Actions, Stack } from 'react-native-router-flux'; // 4.0.0-beta.28 

class First extends Component { 
    state = { showWebView: true }; 
    onEnter =() => { 
    console.log('Entered'); 
    this.setState({ showWebView: true }); 
    } 

    onExit =() => { 
    console.log('Exited'); 
    this.setState({ showWebView: false }); 
    } 

    renderWebView() { 
    //console.log(this.state.showWebView); 
    if (this.state.showWebView) { 
     return (
     <WebView 
      source={{ uri: 'https://www.youtube.com/embed/lEgTtQFMjWw' }} 
      style={{ flex: 1 }} 
      javaScriptEnabled 
      startInLoadingState 
     /> 
    ); 
    } else { 
     return <View />; 
    } 
    } 
    render() { 
    return (
     <View style={{ flex: 1 }}> 
     <Button 
      title="Second" 
      onPress={() => { 
      Actions.push('Second'); 
      }} 
      style={styles.container} 
     /> 
     {this.renderWebView()} 
     </View> 
    ); 
    } 
} 

class Second extends Component { 
    onEnter() { 
    console.log('Entered 2'); 
    } 

    onExit() { 
    console.log('Exited 2'); 
    } 

    render() { 
    return (<Text>This second screen </Text>); 
    } 
} 

export default class App extends Component { 
    render() { 
    return (
     <Router> 
     <Stack> 
      <Scene key="First" component={First} /> 
      <Scene key="Second" component={Second} /> 
     </Stack> 
     </Router> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: 100, 
    backgroundColor: '#ecf0f1', 
    }, 
});