React Native - Como fazer isso em Redux?

30/01/2020

0

Oi pessooal, estou aprendendo React Native e queria saber como passar esse estado para o redux
import React,  from 'react';
import {Platform, StyleSheet, View, ScrollView} from 'react-native';
import {Icon, Text} from 'react-native-elements';
import Voice from 'react-native-voice';
import Button from '../components/Button';
import Phrases from '../components/Phrases';
import ChamadaGCP from '../services/ChamaGCP';
import Itens from '../components/Itens';
import LinhaTopo from '../components/Registro';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import { Provider, connect } from 'react-redux';
import { Store } from '../store/index.js';

type Props = {};
class NativeSpeechToText extends Component {
  static navigationOptions = {
    title: 'GlucoGear - Speech2Txt',
    headerStyle: {
      backgroundColor: '#05668D',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };



  constructor(props) {
    super(props);
    this.state = {
      textoStatus: '',
      texto: '',
      allPhrases: [],
      id: 0,
      btnIniDisabled: false,
      btnParDisabled: true,
      btnIniColor: '#2F4858',
      btnParColor: '#db0000',
      //btnParColor: '#33658A',
      itens: [],
    };

    Voice.onSpeechStart = this.onSpeechStartHandler.bind(this);
    Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this);
    Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this);
  }

  onSpeechResultsHandler(result) {
    if (Array.isArray(result.value)) {
      let text = '';
      text = result.value[0];
      this.state.allPhrases.push({
        text: text,
        id: `${this.state.id}`,
      });
      this.state.id++;
      
      //Função é chamada
      var chamada = new ChamadaGCP();
      let resposta;
      (async () => {
          resposta = await chamada.ChamadaGCP_F(this.state.text);
          this.setState({
              ...this.state,
              itens: resposta,
          });
          this.props.navigation.navigate('Results', {state: this.state})
      })();
      console.log("NativeSpeechToText");
      //---

      // this.setState({
      //   ...this.state,
      //   texto: result.value[0],
      //   allPhrases: this.state.allPhrases,
      // }
      // );
    }

  }

  onSpeechStartHandler() {
    this.setState({
      ...this.state,
      textoStatus: 'Diga alguma coisa',
    });
  }

  onSpeechEndHandler() {
    this.setState({
      ...this.state,
      textoStatus: 'Parado',
    });
  }

  onStartButtonPress(e) {
    this.setState({
      ...this.state,
      btnIniDisabled: true,
      btnParDisabled: false,
      btnIniColor: '#33658A',
      btnParColor: '#db0000',
      textoStatus: 'Diga alguma coisa',
    });
    Voice.start('pt-BR');
  }

  onStopButtonPress(e) {
    this.setState({
      ...this.state,
      btnIniDisabled: false,
      btnParDisabled: true,
      btnIniColor: '#2F4858',
      btnParColor: '#db0000',
      textoStatus: 'Parado',
    });
    Voice.stop();
  }



  render() {
        const { newValue } = this.props;
    return (
      <View style={styles.container}>
        <Provider store= />
                <LinhaTopo />
        <View style={styles.btnWrapper}>
          <Text h4 style={styles.h4}>Clique no ícone abaixo e diga o que irá comer neste momento, conforme o exemplo e aguarde.</Text>
          <Text style={styles.text}>Exemplo: "Quatro colheres de sopa de arroz, uma concha de feijão, 70g de peito de frango e 3 folhas de alface."</Text>

          <Icon
            reverse
            name='speaker-phone'
            //type='font-awesome'
            size=
            //txt="INICIAR"
            onPress={() => this.onStartButtonPress()}
            disabled={this.state.btnIniDisabled}
            color={this.state.btnIniColor}
            containerStyle={styles.Icon}
          />

          <Icon
            reverse
            name="stop"
            size=
            onPress={() => this.onStopButtonPress()}
            disabled={this.state.btnParDisabled}
            color={this.state.btnParColor}
            containerStyle={styles.Icon}
          />

          <Text style={{textAlign:'center', fontStyle:'italic'}} onPress={() =>{console.log("Consegui")}}>
            Ou clique aqui para buscar por alimentos manualmente
          </Text>

      </View>
      </View>
          // <Button
          //   txt="PARAR"
          //   callback={() => this.onStopButtonPress()}
          //   disabled={this.state.btnParDisabled}
          //   color={this.state.btnParColor}
          // />

        // <Text style={styles.text}>Status: {this.state.textoStatus}</Text>
        // <Text style={styles.text}>{this.state.texto}</Text>
        // <Phrases
        //   data={this.state.allPhrases}
        //   navigation={this.props.navigation}
        // />
        // <Itens
        //   data={this.state.itens}
        //   navigation={this.props.navigation}
        // />

    );
  }
}
const mapStateToProps = store => ({
  newValue: store.clickState.newValue
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EBF2FA',
  },
  btnWrapper: {
    flexDirection:'column',
    margin: 5,
  },
  h4: {
    padding: 3,
    fontSize: 25,
    alignSelf: 'flex-start',
    fontFamily: 'Helvetica',
    color: '#000',
    textAlign: "justify",
    letterSpacing: -1,
  },
  Icon: {
    alignSelf: 'center',
    //top: normalize(30)
  },
  text: {
    padding: 20,
    fontSize: 15,
    textAlign:'center',
    //top: normalize(-10)
  },
  btn: {
    flex: 1,
    margin: 10,
    borderRadius: 3,
    backgroundColor: '#427AA1',
  },
  btnTxt: {
    padding: 10,
    fontSize: 20,
    fontFamily: 'Helvetica',
    textAlign: 'center',
    color: '#DDD',
  },
});

export default connect(mapStateToProps)(NativeSpeechToText);



Estou bastante confuso com tudo isso...
Carlos Lopes

Carlos Lopes

Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar