Почему значения не отображаются при нажатии кнопки - PullRequest
Новая
       20

Почему значения не отображаются при нажатии кнопки

0 голосов
/ 30 сентября 2019

Я создаю приложение, которое дает исходное значение гироскопа плюс отфильтрованное значение. Я использую в своем коде два фильтра, один из которых называется 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,
  },
});

1 Ответ

1 голос
/ 30 сентября 2019

Это потому, что вы используете следующее, вызывающее функцию сразу после визуализации компонента:

onPress={this.filter(this.state.dataArr)}

Измените его на что-то вроде этого, которое будет вызывать только this.filter при нажатии кнопки:

onPress={() => {this.filter(this.state.dataArr)}}

...