Question

我正在尝试在React Native的模态中显示youtube视频。

视频以普通视图显示（即没有模态窗口），但是当我将其显示在模态中时，我不会显示同一视频。

到目前为止我尝试过的事情：

// screen1.js

const [isVisible, setVisible] = useState(false);

<Touchable
          onPress={() => setVisible(true)}
          style={{
            minHeight: 200,
            backgroundColor: Colors.Black
          }}>
          <Text></Text>
        </Touchable>


<Modal isVisible={isVisible} onBackdropPress={() => setVisible(false)}>
        <View style={{ maxHeight: 400, backgroundColor: 'white' }}>
          <WebView
            javaScriptEnabled={true}
            source={{
              uri: 'https://www.youtube.com/embed/RJa4kG1N3d0'
            }}
          />
        </View>
  </Modal>

PS：我使用了'react-native-modal'中的模式；

Answer 1

使用反应模块“ react-modal-video”。安装模块usr之后，此行代码

频道名称将为youtube isOpen通过使用状态进行操作 VideoId：您将从链接中使用的链接“ RJa4kG1N3d0”中获取。

Answer 2

import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Modal,
  WebView,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const App = () => {
  const [isVisible, setVisible] = useState(false);
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => setVisible(true)}
        style={{
          height: 50,
          backgroundColor: 'yellow',
        }}>
        <Text>Click me</Text>
      </TouchableOpacity>

      <Modal
        style={{

        }}
        animationType="slide"
        transparent={false}
        visible={isVisible}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}>
        <View style={{ 
          flex: 1,
          backgroundColor: 'orange',
          borderWidth: 1,
          borderColor: 'orange',
          marginTop: 22 }}>

            <WebView
              javaScriptEnabled={true}
              style={{flex:1, borderColor:'red', borderWidth:1, height:400, width:400}}
              source={{
                uri: 'https://www.youtube.com/embed/RJa4kG1N3d0'
              }}
            />
            <TouchableOpacity onPress={() => setVisible(false)}>
              <Text>Hide Modal</Text>
            </TouchableOpacity>

        </View>
      </Modal>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

关注这道小吃：https://snack.expo.io/@prashen/modal-video

尝试在React Native中的模态中显示视频

2 个答案: