我目前正在使用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的新项目。到目前为止添加应用程序所需的所有库都没有问题。
您可以使用视频模块
而无需分离它。
您不需要执行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 }}
/>
是关于视频模块的链接