如何解决反应原生文本梯度加速度计
我正在尝试做一些类似于您在 gif 中看到的内容,使用加速计来更改文本的渐变颜色。
但是我没有成功,你能帮我一把吗?
链接:https://snack.expo.io/7lX-B6WTw
代码:
import React,{ useState,useEffect } from 'react';
import { Text,View,StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import MaskedView from '@react-native-community/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
import { Accelerometer } from 'expo-sensors';
import { randomColor } from 'random-colors-palette';
export default function App() {
const GradientText = (props) => {
const [data,setData] = useState({
x: 0,y: 0,z: 0,});
const [subscription,setSubscription] = useState(null);
const _slow = () => {
Accelerometer.setUpdateInterval(5000);
};
const _fast = () => {
Accelerometer.setUpdateInterval(350);
};
const _subscribe = () => {
setSubscription(
Accelerometer.addListener((accelerometerData) => {
setData(accelerometerData);
})
);
};
const _unsubscribe = () => {
subscription && subscription.remove();
setSubscription(null);
};
useEffect(() => {
_slow();
_subscribe();
return () => _unsubscribe();
},[]);
const { x,y,z } = data;
const getColor = (x,z) => {
return randomColor({
number: 3,typeObj: false,}).color;
};
console.log(x,z);
return (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient
colors={getColor(x,z)}
start={{ x: 0,y: 0 }}
end={{ x: 1,y: 0 }}>
<Text {...props} style={[props.style,{ opacity: 0 }]} />
</LinearGradient>
</MaskedView>
);
};
return (
<View style={styles.container}>
<GradientText style={styles.textStyle}>Hello!</GradientText>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,//justifyContent: 'center',paddingTop: Constants.statusBarHeight,backgroundColor: '#ecf0f1',padding: 8,alignItems: 'center',},textStyle: {
fontSize: 80,fontWeight: 'bold',});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。