将React Native Youtube组件放置在React导航内的问题。

Question

我想把 react-native-youtube 组件放在 react-native-navigation 屏幕里。但它给出了Can't find variable: Youtube错误。

以下是我的代码。

Home.js.App.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 }}
        />