在 React Navigation 中放置 React Native Youtube 组件的问题

Question

我正在尝试将 react-native-youtube 组件放置在 react-native-navigation 屏幕中。但它给出了 Can't find variable: Youtube 错误。

这是我的代码：

Home.js:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import Youtube from 'react-native-youtube';

export default function HomeScreen({navigation}) {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <YouTube
          apiKey="key"
          videoId="video id" // The YouTube video ID
          play="true" // control playback of video with true/false
          fullscreen="true" // control whether the video should play in fullscreen or inline
          loop="false" // control whether the video should loop when ended
          onReady={e => this.setState({ isReady: true })}
          onChangeState={e => this.setState({ status: e.state })}
          onChangeQuality={e => this.setState({ quality: e.quality })}
          onError={e => this.setState({ error: e.error })}
          style={{ alignSelf: 'stretch', height: 300 }}
        />
      </View>
    );
  }

App.js:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/Home';
import Youtube from 'react-native-youtube';
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

Answer 1

您的导入使用的是简单的 't' Youtube，因此组件应该是

改为

     <Youtube
          apiKey="key"
          videoId="video id" // The YouTube video ID
          play="true" // control playback of video with true/false
          fullscreen="true" // control whether the video should play in fullscreen or inline
          loop="false" // control whether the video should loop when ended
          onReady={e => this.setState({ isReady: true })}
          onChangeState={e => this.setState({ status: e.state })}
          onChangeQuality={e => this.setState({ quality: e.quality })}
          onError={e => this.setState({ error: e.error })}
          style={{ alignSelf: 'stretch', height: 300 }}
        />

在 React Navigation 中放置 React Native Youtube 组件的问题

Problem with Placing React Native Youtube Component Inside React Navigation

reactjs

react-native

react-native-navigation