react-native库记录

最新推荐文章于 2024-05-29 09:48:59 发布

T3119205

最新推荐文章于 2024-05-29 09:48:59 发布

阅读量279

点赞数

分类专栏： ReactNative android 文章标签： react native react.js javascript

原文链接：https://sundashan.cn/react-native-something/react-native%E9%9B%B6%E6%95%A3%E8%AE%B0%E5%BD%95/

版权

android 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

ReactNative

9 篇文章 0 订阅

订阅专栏

react-native零散记录 — sundashan

导航栏 react-navigation、react-native-navigation各有千秋，看自己选择
蓝牙 react-native-ble-plx react-native-ble-manager react-native-bluetooth-serial 都可以看下，我用的是react-native-ble-plx，文档比较全面，同时适配安卓ios
录音 react-native-audio
播放音频 react-native-sound
播放视频 react-native-video
相机 react-native-camera
截图 react-native-view-shot
文字渐变 react-native-text-gradient 或者自己用svg的渐变写下，也很简单，[ 例子见最下方 ]
背景渐变 react-native-linear-gradient
边框阴影安卓可以用属性elevation，或者react-native-cardview 说到这两个属性就要说到层级关系，比如，给边框加了阴影以后，再想在上面通过position: ‘absolute’加一层遮罩，这个时候就发现遮罩无效注意：
1. 如果只有zIndex没有elevation,那么zIndex大的在上层
2. 如果两个组件都有elevation，那么elevation大的在上层
3. 如果既有zIndex也有elevation，那么以elevation为准
所以上面说的遮罩无效的问题，解决方法是在遮罩上也加上elevation
本地文件访问 react-native-fs
图表 victory-native：文档非常全，可配置的属性很多很全，比如折线图的点是否突出显示、折线图的一段标红，比较推荐使用 react-native-echarts：好久之前更新的，安装的时候一直报错，就没用了 react-native-chart-kit：图表不全，而且折线图上面的点我没找着怎么去掉，不符合我们的需求，去掉 react-native-svg-charts：蛮好看的，也蛮好用的，可以看看 react-native-charts-wrapper：忘了为啥没用它
UI组件 NativeBase
svg react-native-svg：注意事项：svg要进行transform变换，需要在进行变换的元素上面套一层G
图片相关
1. 图片上传 react-native-image-picker
2. 图片预览 react-native-image-zoom-viewer

文字渐变例子：

import { Svg, Rect, Defs, LinearGradient, Use, Stop, Text } from 'react-native-svg'
<Svg width="100" height="21" viewBox="0 0 100 21">
    <Defs>
        <LinearGradient
            id="Gradient"
            gradientUnits="userSpaceOnUse"
            x1="0"
            y1="0"
            x2="100"
            y2="0"
        >
            <Stop offset="0" stopColor={this.props.startColor} stopOpacity="1" />
            <Stop offset="1" stopColor={this.props.endColor} stopOpacity="1" />
        </LinearGradient>
        <Text
            id="Text"
            x="50"
            y="15"
            fontFamily="Verdana"
            fontSize="18"
            textAnchor="middle"
            >
        {this.props.value}
        </Text>
    </Defs>
    <Rect x="0" y="0" width="100" height="21" fill="#FFF" />
    <Use href="#Text" fill="url(#Gradient)" />
</Svg>