javascript - 试图在反应原生的模态中显示视频

Question

我正在尝试在本机反应的模态中显示 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”中的模态；

标签： javascriptreactjsreact-native

Answer 1

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