提问者:小点点

独立世博会项目中的视频播放器


我目前正在使用expo库以react-native开发一个移动应用程序。由于expo不支持所有第三方库,因此该项目必须与expo分离。

当我尝试在项目中添加视频播放器时,我的问题出现了。我想可能是其他库与视频播放器发生了冲突,所以我只使用视频播放器制作了一个新的干净项目。

清洁项目与主项目具有相同的设置,react-native与分离的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

我的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(模块:应用程序):https://pastebin.com/kHTTdUrM

我的build. gradle(项目:android):https://pastebin.com/idxF7a8j

主要应用:

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的新项目。到目前为止添加应用程序所需的所有库都没有问题。


共1个答案

匿名用户

您可以使用视频模块而无需分离它。

您不需要执行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 }}
/>

是关于视频模块的链接