Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de connection entre ReactNative et NodeJS

Sujet résolu
    22 octobre 2019 à 19:14:03

    Bonjour,

    J'ai un petit problème pour faire commnuiquer mon application Android développée avec RN et Mon backend nodeJS hébergé sur un VPS.

    En effet la communication marche très bien en mode debug avec axios mais dès que je builde l'apk il marche plus, il y a bien la permission INTERNET dans le fichier manifest.

    Merci par avance pour votre aide.

    Voici la partie qui fait l'appel API:

    import React from 'react'
    import Header from "../components/Header"
    import axios from 'axios'
    import '../constants/serverAdress'
    import {withSnackbar} from "../components/SnackBar"
    import {
        Button,
        ImageBackground,
        Tile,
        Overlay,
        TextInput,
        Title,
        Subtitle,
        Text,
        Card,
        Caption,
        Image,
        View
    } from "@shoutem/ui"
    import luminy from '../assets/images/luminy.jpg'
    import luminy2 from '../assets/images/luminy2.jpg'
    import {KeyboardAvoidingView, ScrollView} from "react-native";
    import { Provider, Portal, Modal} from "react-native-paper";
    import moi from '../assets/images/moi.jpg'
    import SplashScreen from 'react-native-splash-screen'
    
    class Welcome extends React.Component {
    
        constructor(props) {
            super(props)
            this.state = {
                pseudo: '',
                visible: false
            }
            this.onSubmit = this.onSubmit.bind(this)
        }
    
        _showModal = () => this.setState({ visible: true });
        _hideModal = () => this.setState({ visible: false });
    
        function
    
        componentDidMount() {
            SplashScreen.hide()
        }
    
        onSubmit(e){
            e.preventDefault()
            const { snackbar, navigation } = this.props
            axios.post(`${SERVER_ADRESS}/register`, { pseudo: this.state.pseudo })
            .then(res => {
                if(res.data.status !== undefined){
                    snackbar.showMessage(res.data.message)
                } else {
                    navigation.navigate('chat', {
                        id : res.data._id,
                        pseudo: this.state.pseudo
                    })
                }
            })
            .catch(error => {
                console.log(error)
            })
        }
        render() {
            return (
                <KeyboardAvoidingView
                    behavior="padding"
                    style={{flex: 1}}
                >
                    <Header title="Welcome" help helpAction={this._showModal}/>
                    <ImageBackground
                        styleName="large"
                        source={luminy2}
                    >
                        <Tile>
                            <Overlay styleName="image-overlay">
                                <Title styleName="sm-gutter-horizontal">Bienvenue sur LumEnnui</Title>
                                <Subtitle>Saisis ou crée ton pseudo et commence à  .....</Subtitle>
                            </Overlay>
                        </Tile>
                    </ImageBackground>
                    <ImageBackground
                        styleName="large"
                        source={luminy}
                    >
                        <TextInput
                            placeholder={'Pseudo'}
                            onChangeText={(text) => this.setState({pseudo: text})}
                        />
                        <Button
                            styleName="secondary"
                            style={{ marginTop: 20}}
                            onPress={this.onSubmit}
                        >
                            <Text>ACCEDER</Text>
                        </Button>
                    </ImageBackground>
                    {/*Modal section*/}
                    <Provider>
                        <Portal>
                            <Modal visible={this.state.visible} onDismiss={this._hideModal}>
                                <Card style={{ width: 200, height: 400}}>
                                    <Image
                                        styleName="medium-avatar"
                                        source={moi}
                                    />
                                    <View styleName="content">
                                        <ScrollView>
                                            <Subtitle>
                                               lorum ipsum
                                            </Subtitle>
                                            {/*<Subtitle style={{ color: 'red'}}>
                                                lorum ipsum
                                            </Subtitle>*/}
                                            <Caption>Créé par Mama DEMBELE aka Pakendux</Caption>
                                        </ScrollView>
                                    </View>
                                </Card>
                            </Modal>
                        </Portal>
                    </Provider>
                </KeyboardAvoidingView>
            );
        }
    }
    export default withSnackbar(Welcome)
     Run code snippet



    -
    Edité par Pakendux 22 octobre 2019 à 19:16:19

    • Partager sur Facebook
    • Partager sur Twitter

    Problème de connection entre ReactNative et NodeJS

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown