Taro钟表组件、兼容h5和ReactNative

后续会支持小程序
先上效果图
H5端：

RN端：我用的是Iphone8plus

父组件：

import Taro, { Component } from '@tarojs/taro'
import TimeClockh5 from './../../../h5/components/home/timeClock'
import TimeClockRN from './../../../reactNative/components/home/timeClock'
// import { getMinutes,getSecond,getHours } from '@/commons/date'


function getMinutes(){  //获取当前分钟数
    var myDate = new Date();
    return myDate.getMinutes()
}
function getHours(){    //获取当前的小时数
    var myDate = new Date();
    return myDate.getHours()
}
type stateType = {
    time:number
}
type propsType = {

}
interface TimeClock{
    state:stateType,
    props:propsType
}
class TimeClock extends Component{
    constructor(props){
        super(props)
        this.state = {
            time:this.getDeg()
        }
    }

    componentWillMount(){
        setInterval(()=>{   //每分钟刷新一次指针
            this.setState({
                time:this.getDeg()
            })
        },60000)
        
    }
    getDeg(){   //计算当前分钟内的度数
        let dayMinutes = getHours() * 60 + getMinutes();  //获取当前一天已经过去的分钟数量
        let totalMinutes = 24 * 60; //当前天数的总分钟数量
        let bili = dayMinutes/totalMinutes; //计算出比例
        return 360*bili;
    }

    render(){
        const {
            time:time
        } = this.state
        return(
                process.env.TARO_ENV === 'rn'?
                <TimeClockRN Minutes={time}></TimeClockRN>:
                <TimeClockh5 Minutes={time}></TimeClockh5>
        )
    }
}
export default TimeClock;

RN端子组件：（好像用不用Animated都可以）

import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import { Animated } from 'react-native';
import styles from './timeClock.scss'

type propsType = {
    Minutes:number
}
type stateType = {
    boxWidth:any,   //指针盒子的宽度
    boxHeight:any,  //长度
    boxMarginTop:any,
    boxMarginLeft:any,
    boxTransform:any,   //旋转角度
}
interface TimeClock{
    props:propsType,
    state:stateType
}
class TimeClock extends Component{
    constructor(props){
        super(props)
        this.state = {
            boxWidth:new Animated.Value(Taro.pxTransform(13)),  //pxTransform  Taro提供的运行时样式转换
            boxHeight:new Animated.Value(Taro.pxTransform(488)),
            boxMarginTop:new Animated.Value(Taro.pxTransform(206)),
            boxMarginLeft:new Animated.Value(Taro.pxTransform(443)),
            boxTransform:"0deg",
        }
    }

    componentDidMount(){
        this.setState({
            boxTransform:this.props.Minutes + "deg"
        })
    }
    componentWillReceiveProps(props){
        this.setState({
            boxTransform:this.props.Minutes + "deg"
        })
    }
    render(){
        const {
            boxWidth:boxWidth,
            boxHeight:boxHeight,
            boxMarginTop:boxMarginTop,
            boxMarginLeft:boxMarginLeft,
            boxTransform:boxTransform
        } = this.state
        return(
            <View className={styles.bigBox} style={styles.bigBox}>
                <Image className={styles.biaoBackImg} style={styles.biaoBackImg} src={require('./../../../assets/icon/timeBlock.png')}></Image>
                <Animated.View style={{
                    width: boxWidth,
                    height: boxHeight,
                    marginTop: boxMarginTop,
                    marginLeft: boxMarginLeft,
                    transform:[
                        {rotateZ:boxTransform}
                    ]
                }}>
                    <Image className={styles.zhiZhengIcon} style={styles.zhiZhengIcon} src={require('./../../../assets/icon/zhizhengIcon.png')}></Image>
                </Animated.View>
            </View>
        )
    }
}
export default TimeClock;

RN端scss样式：

.bigBox{
    position: absolute;
    top: 248px;
    left: 90px;
    width: 900px;
    height: 900px;
    z-index: 999;
}
.biaoBackImg{
    position: absolute;
    width: 900px;
    height: 900px;
    top: 0;
    left: 0;
}
.zhiZhengIcon{
    width: 13px;
    height: 244px;
}

h5端组件：

import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import styles from './timeClock.scss'


type propsType = {
    Minutes:number
}
type stateType = {
    boxTransform:any,   //旋转角度
}
interface TimeClock{
    props:propsType,
    state:stateType
}
class TimeClock extends Component{
    constructor(props){
        super(props)
        this.state = {
            boxTransform:"0deg",    //旋转角度
        }
    }
    componentDidMount(){
        this.setState({
            boxTransform:this.props.Minutes + "deg"
        })
    }
    componentWillReceiveProps(props){
        this.setState({
            boxTransform:this.props.Minutes + "deg"
        })
    }

    render(){
        const {
            boxTransform:boxTransform
        } = this.state
        return(
            <View className={styles.bigBox} style={styles.bigBox}>
                <Image className={styles.biaoBackImg} style={styles.biaoBackImg} src={require('./../../../assets/icon/timeBlock.png')}></Image>
                <View className={styles.zhizhenBox} style={{"transform": "rotateZ(" + boxTransform + ")"}}>
                    <Image className={styles.zhiZhengIcon} style={styles.zhiZhengIcon} src={require('./../../../assets/icon/zhizhengIcon.png')}></Image>
                </View>
            </View>
        )
    }
}
export default TimeClock;

h5端scss样式：

.bigBox{
    position: absolute;
    top: 248px;
    left: 90px;
    width: 900px;
    height: 900px;
    z-index: 999;
}
.biaoBackImg{
    position: absolute;
    width: 900px;
    height: 900px;
    top: 0;
    left: 0;
}
.zhizhenBox{
    width: 13px;
    height: 488px;
    margin-top: 206px;
    margin-left: 443.5px;
    // transform: rotateZ(90deg);
}
.zhiZhengIcon{
    width: 13px;
    height: 244px;
}

前天可算体会一下删库的感觉
有什么不完善的地方说一声