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

【问题标题】：Problem with Placing React Native Youtube Component Inside React Navigation在 React Navigation 中放置 React Native Youtube 组件的问题
【发布时间】：2020-06-01 09:57:02
【问题描述】：

我正在尝试将 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;

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案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 }}
        />

【讨论】：