0

Boa tarde!

Estou com uma duvida de iniciante e infelizmente não estou conseguindo achar um tutorial da linguagem (quem tiver um link por favor coloque nas respostas), eu quero apenas mostrar os conteúdos das variáveis 'ping' e 'connectado' porem não estou conseguindo fazer isso.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';

import NetInfo from '@react-native-community/netinfo';
import Ping from 'react-native-ping';

var ping, connectado;

export default class App extends Component {

  render() {
    NetInfo.isConnected.fetch().then(isConnected => {
      console.log("Is connected", isConnected);
      connectado = isConnected;
    });

    (async () => {
      try {
        ms = await Ping.start('www.google.com.br',{ timeout: 1000 });
        console.log(ms);
        ping = ms;
      } catch (error) {
        console.log('special code',error.code, error.message);
      }
    })();

    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>MS: {ping}</Text>
          <Text style={styles.welcome}>Connectado: {connectado}</Text>
        </View>    
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

2 Respostas 2

1

Fala Gustavo. Você precisa colocar isso dentro do state. O React é reativo, então ao mudar o state ele "reage" e renderiza novamente os componentes.

export default class App extends Component {
state = {
  ping: "",
  connectado: "",
};
  render() {
    NetInfo.isConnected.fetch().then(isConnected => {
      console.log("Is connected", isConnected);
      this.setState({ conectado: isConnected });
    });

    (async () => {
      try {
        ms = await Ping.start('www.google.com.br',{ timeout: 1000 });
        console.log(ms);
        this.setState({ ping: ms });
      } catch (error) {
        console.log('special code',error.code, error.message);
      }
    })();

    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>MS: {this.state.ping}</Text>
          <Text style={styles.welcome}>Connectado: {this.state.connectado}</Text>
        </View>    
    );
  }
}
...

Talvez eu só colocaria as funções no componentDidMount

0

Gustavo, é necessário criar um estado (State), no React-Native. Também tem o React Hooks, que nos permite trabalhar com estados em componentes no formato de função.

state = {
  ping: "",
  connectado: "",
};

Para alterar o State use o setState

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .