我正在制作一个提供陀螺仪原始值和过滤后值的应用。我在代码中使用了两个过滤器,一个被命名为simple,另一个被命名为filter。我想为两个过滤器创建按钮,并希望每当单击按钮时都显示过滤后的值。但是在我的代码中,一次没有单击就只显示一个过滤器。按钮出现,但它们不起作用。代码附在下面:
import React from 'react';
import { Gyroscope } from 'expo-sensors';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default class GyroscopeSensor extends React.Component {
state = {
gyroscopeData: {},
dataArr:[],
simpleData:[],
};
componentDidMount() {
this.available();
this._toggle();
}
componentWillUnmount() {
this._unsubscribe();
}
// componentWillUpdate(){
// this.filter(this.state.dataArr,20);
// }
_toggle = () => {
if (this._subscription) {
this._unsubscribe();
} else {
this._subscribe();
}
};
_slow = () => {
Gyroscope.setUpdateInterval(2000);
};
_fast = () => {
Gyroscope.setUpdateInterval(16);
};
_subscribe = () => {
this._subscription = Gyroscope.addListener(result => {
this.setState({ gyroscopeData: result });
});
};
_unsubscribe = () => {
this._subscription && this._subscription.remove();
this._subscription = null;
};
available=async()=>{
check=await Gyroscope.isAvailableAsync()
console.log(check)
}
filter=( values )=>{
var value = values[0]; // start with the first input
for (var i=1; i<values.length; ++i){
var currentValue = values[i];
value += (currentValue - value) / 20;
values[i] = round(value);
}}
simple = (valx) => {
// for (var a=1; a<valx.length; ++a){
if(this.state.simpleData.length<=15){
// var simpleValue = valx[a];
if (valx < 0.05 && valx > -0.05){
this.state.simpleData.push(0)}
else this.state.simpleData.push(valx)
// valx[a]= simpleData;
// }
}
}
render() {
let {x,y,z}=this.state.gyroscopeData;
if(this.state.dataArr.length<=10){
this.state.dataArr.push(round(x))}
else this.state.dataArr=[]
return (
<View style={styles.sensor}>
<Text>Gyroscope:</Text>
<Text>
x: {round(x)} y: {round(y)} z: {round(z)}
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this._toggle} style={styles.button}>
<Text>Toggle</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
<Text>Slow</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._fast} style={styles.button}>
<Text>Fast</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.filter(this.state.dataArr)} style={styles.button}>
<Text>Filter</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.simple(round(x))} style={styles.button}>
<Text>Simple</Text>
</TouchableOpacity>
{/* {this.state.simpleData.map((val)=><Text>{val}</Text>)} */}
{this.state.dataArr.map((val1)=><Text>{val1}</Text>)}
</View>
</View>
);
}
}
function round(n) {
if (!n) {
return 0;
}
return Math.floor(n * 100) / 100;
}
// LPF.smoothing = 0.5;
// var values = [gyroscopeData];
// LPF.smoothArray(values)
// // RESULT: [10,9,9,10,11,9,30,20,16,12]
// // Stream
// LPF.smoothing = 0.2;
// LPF.init([gyroscopeData]);
// LPF.next(20); // around 12.0
// LPF.next(10); // around 10.3
const styles = StyleSheet.create({
container: {
flex: 1,
},
buttonContainer: {
flexDirection: 'column',
alignItems: 'stretch',
marginTop: 15,
},
button: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#eee',
padding: 20,
// },
// middleButton: {
// borderLeftWidth: 1,
// borderRightWidth: 1,
// borderColor: '#ccc',
},
sensor: {
marginTop: 30,
paddingHorizontal: 10,
},
});
这是因为您使用的是以下内容,它们在呈现组件后立即调用该函数: