代码拉取完成,页面将自动刷新
Using npm:
npm install --save react-native-aliyun-short-video
or using yarn:
yarn add react-native-aliyun-short-video
react-native link react-native-aliyun-short-video
(or using rnpm
for versions of React Native < 0.27)
rnpm link react-native-aliyun-short-video
android/app/build.gradle
:dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-aliyun-short-video')
...
}
android/settings.gradle
:...
include ':app'
+ include ':react-native-aliyun-short-video'
+ project(':react-native-aliyun-short-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-aliyun-short-video/android')
...
MainApplication.java
:...
+ import com.rnshortvideo.RNShortVideoPackage;
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
+ new RNShortVideoPackage()
);
}
...
}
MainActivity.java
:...
+ import com.rnshortvideo.RNShortVideoPackage;
public class MainActivity extends ReactActivity {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
+ new RNShortVideoPackage()
);
}
}
In XCode, in the project navigator:
node_modules/react-native-aliyun-short-video/ios
RNShortVideo.xcodeproj
filenode_modules/react-native-aliyun-short-video/ios/AliyunSDK
folder to your xcode project. (Make sure Copy items if needed IS ticked)Click on project General tab
+
and add AliThirdparty.framework
, AliyunPlayerSDK.framework
, AliyunVideoSDK.framework
, AliyunVodPlayerSDK.framework
, QuCore-ThirdParty.framework
+
and add RNShortVideo.framework
, libz.tbd
, libc++.tbd
, libiconv.tbd
, libresolv.tbd
, ImageIO.framework
, CoreMedia.framework
, CoreVideo.framework
, SystemConfiguration.framework
, Photos.framework
, OpenAL.framework
, VideoToolbox.framework
Click on project Build Settings tab
-ObjC
$(SRCROOT)/../node_modules/react-native-aliyun-short-video/ios/AliyunSDK
$(SRCROOT)/../node_modules/react-native-aliyun-short-video/ios/RNShortVideo
(Mark as recursive)Click on project Build Phase tab
+
and add QPSDK.bundle
and AliyunLanguageSource.bundle
In the project navigator:
NSPhotoLibraryUsageDescription
, NSMicrophoneUsageDescription
, NSCameraUsageDescription
and NSPhotoLibraryAddUsageDescription
keys to your Info.plist
with strings describing why your app needs these permissions. Note: You will get a SIGABRT crash if you don't complete this step
Run your project (Cmd+R)
See the example
...
import RNShortVideo, { VideoView } from 'react-native-aliyun-short-video';
...
...
onRecord = () => {
RNShortVideo.recordShortVideo()
.then((path) => {
this.setState({ path });
})
.catch((err) => {
console.error(err);
});
};
...
...
<View>
{
this.state.path ? (
<VideoView
fullscreen
source={{ url: this.state.path }}
poster="http://t.cn/RuWRYzv?1=1"
/>
) : null
}
</View>
...
When installing or using react-native-aliyun-short-video
, you may encounter the following problems:
android/app/build.gradle
:android {
...
packagingOptions {
exclude('META-INF/LICENSE')
+ pickFirst "**/libgnustl_shared.so"
}
...
}
android/app/build.gradle
:...
repositories {
flatDir {
- dirs "libs"
+ dirs "libs", "$rootDir/../node_modules/react-native-aliyun-short-video/android/libs"
}
}
...
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。