Skip to content

主题 ​

编辑器内置深色主题(默认)和浅色主题,也可以为体现品牌风格的部分自定义颜色。

ts
showEditor(videoUri, { theme: 'light' });

动手试试 ​

在下方选择颜色,即可在模拟的裁剪界面上预览效果,并复制对应的 showEditor() 代码。预览只是用 CSS 绘制的近似效果;真实的编辑器是原生界面,还会显示编辑工具栏。

主题
媒体类型

手柄上箭头的对比度: 14.0:1

showEditor(videoUri, {});

主题会改变哪些内容 ​

深色(默认)浅色
背景黑色白色
图标与文字白色黑色
取消和保存按钮文字白色黑色
裁切角标与网格白色黑色
标题文字(headerTextColor 默认值)白色黑色
手柄箭头(handleIconColor 默认值)黑色白色
弹窗深色样式浅色样式

颜色选项 ​

所有颜色选项都接受任意 React Native 颜色字符串,例如 '#f1d247'、'#007AFF'、'white'、'rgb(0, 122, 255)'。本库在传给原生代码前会用 processColor 转换。

选项默认值作用对象
trimmerColor'#f1d247'裁剪框及其两个手柄。
handleIconColor黑色(深色主题)、白色(浅色主题)手柄上的 ‹ › 箭头。
headerTextColor白色(深色主题)、黑色(浅色主题)headerText 标题。
waveformColor'white'波形条,仅适用于音频。
waveformBackgroundColor'#3478F6'波形背后的轨道,仅适用于音频。

没有显式设置时,headerTextColor 和 handleIconColor 会跟随主题。修改 trimmerColor 后,请确认箭头仍然清晰可见;上面的预览工具会显示对比度。

ts
showEditor(videoUri, {
  theme: 'light',
  headerText: '裁剪你的视频',
  headerTextSize: 18,
  trimmerColor: '#007AFF',
  handleIconColor: '#FFFFFF',
});

文字与标签 ​

本库没有单独的多语言 API。每个标签和弹窗文案都是一个选项,从你的 i18n 层传入翻译好的字符串即可。完整列表请参阅打开编辑器。

时间标签 ​

使用 durationFormat 修改开始、当前和结束时间的显示方式,例如用 'mm:ss' 隐藏毫秒。参阅时间标签格式。

基于 MIT 许可证发布。