Question

我目前正在与expo库一起开发本机移动应用程序。由于expo不支持每个第三方库，因此必须将项目与expo分离。

当我尝试向项目中添加视频播放器时出现了我的问题。我以为可能还有其他库与视频播放器相撞，所以我只用视频播放器创建了一个新的干净项目。

干净的项目具有与主项目相同的设置，并与独立的Expo进行反应。

我遵循了本指南以脱离博览会：https://docs.expo.io/versions/v28.0.0/expokit/detach/

我按照本指南设置了react-native-unimodels：https://github.com/unimodules/react-native-unimodules

我已按照本指南添加了视频库：https://github.com/expo/expo/tree/master/packages/expo-av

当我尝试在Android Studio中编译代码时，收到以下错误输出：

我的App.js代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Video } from 'expo-av';

export default class App extends React.Component {
  render() {
    return (
      <Video
        source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode="cover"
        shouldPlay
        isLooping
        style={{ width: 300, height: 300 }}
      />

    );
  }
}

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

我的build.gradle（Module：app）：https://pastebin.com/kHTTdUrM

我的build.gradle（项目：android）：https://pastebin.com/idxF7a8j

MainApplication：

public class MainApplication extends ExpoApplication implements AppLoaderPackagesProviderInterface {

  private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(Arrays.<Package>asList(
    new ReactAdapterPackage(),
    new ConstantsPackage(),
    new PermissionsPackage(),
    new FileSystemPackage(),
    new AVPackage()
 ), Arrays.<SingletonModule>asList());

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  // Needed for `react-native link`
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ModuleRegistryAdapter(mModuleRegistryProvider)
    );
  }

    public List getExpoPackages() {
        return Arrays.asList(
                new CameraPackage(),
                new ConstantsPackage(),
                new SensorsPackage(),
                new FileSystemPackage(),
                new FaceDetectorPackage(),
                new GLPackage(),
                new GoogleSignInPackage(),
                new PermissionsPackage(),
                new SMSPackage(),
                new PrintPackage(),
                new ConstantsPackage(),
                new MediaLibraryPackage(),
                new SegmentPackage(),
                new FontLoaderPackage(),
                new LocationPackage(),
                new ContactsPackage(),
                new BarCodeScannerPackage(),
                new AdMobPackage(),
                new LocalAuthenticationPackage(),
                new LocalizationPackage(),
                new AppAuthPackage(),
                new TaskManagerPackage(),
                new BackgroundFetchPackage()
        );
    }

  @Override
  public String gcmSenderId() {
    return getString(R.string.gcm_defaultSenderId);
  }

  @Override
  public boolean shouldUseInternetKernel() {
    return BuildVariantConstants.USE_INTERNET_KERNEL;
  }

  public static OkHttpClient.Builder okHttpClientBuilder(OkHttpClient.Builder builder) {
    // Customize/override OkHttp client here
    return builder;
  }
}

更新：

对于这个涉及expo的问题，我们没有找到任何解决方案，我们所做的是完全删除了expo库，并创建了一个仅带有react-native的新项目。到目前为止，添加应用程序所需的所有库都没有问题。

Answer 1

您可以使用video module而不断开它。

您不需要执行expo eject。

视频example.js：

import { Video } from 'expo';
...
<Video
  source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
  rate={1.0}
  volume={1.0}
  isMuted={false}
  resizeMode="cover"
  shouldPlay
  isLooping
  style={{ width: 300, height: 300 }}
/>

关于视频模块的问题是link

独立展览项目中的视频播放器

1 个答案: