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

Question

我使用 Expo 创建我的项目。我使用基于 react-navigation

的 react-native-router-flux 导航布局

我想嵌入一个 youtube id，我发现 expo 还不支持 YoutuBe api，所以我尝试使用 WebView。

这是我的 WebView 代码:

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

它可以工作，但是当我尝试导航另一个布局时，视频仍在后台播放...

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

这是我的环境:

"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

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

现在我使用最近添加到 react-navigation 中的这些新方法 https://reactnavigation.org/docs/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

我设置了一个变量，通过它更新状态并在调用 willBlur 时设置状态，以便在呈现屏幕时返回一个空 View 。

编辑:由于这是专门针对 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',
  },
});