React Native系列(四)- 一些插件

Yukino 1,026 2022-09-14

本想给这些功能插件每个单独写一篇详细的使用教程,但感觉使用的也都是些基础功能,故在此记录下这些插件,以及对应的简单使用代码

  1. 渐变色组件(linear-gradient)- react-native-linear-gradient,RN没有提供官方的渐变色样式我是真没想到的,这个组件感觉就是一个带背景的View:
<LinearGradient
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: 1 }}
  colors={['#8EA5EC', '#415DCD']}
>
  <Text>Content</Text>
</LinearGradient>
  1. 剪切板 - @react-native-clipboard/clipboard,RN官方的clipboard弃用了,这个是社区中使用的比较多的库,使用起来也比较简单:
import { useClipboard } from '@react-native-clipboard/clipboard';

function () {
  const [, setString] = useClipboard();
  return <Button title='copy' onPress={() => setString('the content you want write')} />
}
  1. 弹出层Popover - react-native-popover-view,这是一个功能还算比较全的popover,我拿这个是实现一个tooltip;
  2. 相机Camera - react-native-vision-camera,这个功能就比较强大了,基本上常用的相机相关的功能都有了,社区也开发了不少插件,我主要是用这个库和vision-camera-code-scanner插件实现的扫描二维码/条形码的功能,例子建议看文档中的例子吧(注:build时会下载很多依赖,还都是GitHub的链接,注意科学上网,如果下载失败可以尝试yarn start --reset-cache或者cd android && ./gradlew clean后重试);
  3. Svg图片 - react-native-vector-image,RN的Image是不支持Svg格式的资源显示的(人都晕了),这个用起来还比较麻烦,没特殊情况还是直接用Png、jpg吧;