Question

我使用Expo创建项目。我使用基于react-native-router-flux

的react-navigation导航布局

我想嵌入一个youtube id，我发现expo还不支持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

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

现在我使用这些新方法最近添加到react-navigation 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。查看链接的问题。

这是一个演示它的代码片段（你可以使用flux变量）：

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',
  },
});

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

1 个答案: