React Native 网络请求

简介:
+关注继续查看

如下面的Code,分别介绍了GET,POST,以及使用XMLHttpRequest的Get请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { Component } from 'react';
import { AppRegistry,
 StyleSheet,
 Text,
 View,
 Image,
 TouchableOpacity,
 TouchableHighlight,
 ToastAndroid,
 Alert, } from 'react-native';
 
var BASE_URL = 'https://m.baidu.com';
 
class AlignItemsBasics extends Component {
 
    getEvent() {
        fetch('https://m.baidu.com' )
            .then((response) => response.text())
            .then((responseText) => {
              ToastAndroid.show(responseText, ToastAndroid.SHORT);
              console.warn(new Date().getMilliseconds());
            })
            .catch((error) => {
              console.warn(error);
            }).done();
 
    }
 
    getByXMLHttpRequest(){
        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if(request.readyState !== 4){
                return;
            }
            if(request.status === 200){
                ToastAndroid.show('success' + request.responseText, ToastAndroid.SHORT);
            }else{
                ToastAndroid.show('error', ToastAndroid.SHORT);
            }
        };
        request.open('GET','http://xxx/xxx');
        request.send();
    }
 
     postSource(){
        fetch('https://m.baidu.com' ) //
        .then((response) => response.text())
        .then((responseText) => {
            // Works on both iOS and Android
            Alert.alert(
              '请求结果',
              responseText.substring(0,100),
              [
                {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
                {text: 'Cancel', onPress: () => console.warn('Cancel Pressed'), style: 'cancel'},
                {text: 'OK', onPress: () => console.warn('OK Pressed')},
              ]
            )
        })
        .catch((error) => {
          console.warn(error);
        }).done();
      }
 
    render() {
 
      return (
        <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
            <TouchableHighlight  onPress={this.getEvent} style={styles.button}>
                  <Text>Get 请求</Text>
            </TouchableHighlight>
             <TouchableHighlight  onPress={this.getByXMLHttpRequest} style={styles.button}>
                  <Text>使用XMLHttpRequest Get 请求</Text>
             </TouchableHighlight>
             <TouchableHighlight  onPress={this.postSource} style={styles.button}>
                  <Text>Post 请求</Text>
             </TouchableHighlight>
        </View>
 
      );
    }
 
 
};
 
    var styles = StyleSheet.create({
        button: {
          width : 180,
          height: 50,
          justifyContent:'center',
          backgroundColor: '#e2e2e2',
          alignItems:'center',
          margin: 10,
        }
    });
 
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

  


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/5954160.html,如需转载请自行联系原作者

目录
相关文章
|
1月前
|
前端开发 JavaScript Android开发
React Native 和 Flutter对比,包含代码实例
@[TOC](目录) React Native 和 Flutter 都是流行的跨平台移动应用开发框架。虽然它们在很多方面都有相似之处,但它们也有一些不同之处。在本文中,我们将详细比较这两个框架,讨论它们的优缺点、应用场景、性能以及包含的代码。 # 1. 框架概述 React Native 是由 Facebook 开发的一个开源框架,它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具,如 Babel、ESLint 和 React 工具链,使得开
|
1月前
|
前端开发 JavaScript Android开发
React Native详解和代码实例
@[TOC](目录) React Native 是一个用于构建原生移动应用程序的 JavaScript 框架。它使用 React 库,允许开发者使用 JavaScript 编写应用程序的 UI 和逻辑,并将其转换为本地平台(iOS 和 Android)上的原生视图。React Native 由 Facebook 开发,并于 2015 年发布。截至 2021 年,React Native 已经成为最受欢迎的跨平台移动应用程序开发框架之一。 在本详解中,我们将介绍 React Native 的主要特点、工作原理、优缺点以及代码示例。 # 一、React Native 的主要特点 1. 跨平台:Re
|
1月前
|
前端开发 数据安全/隐私保护 数据格式
react常见的http网络请求
react常见的http网络请求
26 0
|
1月前
|
移动开发 缓存 前端开发
react native简单入门
react native简单入门
20 0
|
1月前
|
前端开发 JavaScript API
对React Native的了解?
对React Native的了解?
|
1月前
|
开发框架 Dart 前端开发
探索 React Native 和 Flutter
移动应用开发无需重复编写代码?创造令人惊叹的用户体验,同时适用于 iOS 和 Android 平台?这听起来像是不敢想象的未来科技,但事实上,React Native 和 Flutter 已经为我们实现了这些梦想。这两个备受瞩目的跨平台开发框架正改变着移动应用开发的游戏规则,提供了一种高效、便捷的开发方式。在这篇令人兴奋的博文中,我们将探索 React Native 和 Flutter 的技术细节,揭示它们的工作原理和独特之处。无论您是一位开发者还是一个对新技术充满好奇心的读者,本文将为您带来不可错过的前沿知识和启示。准备好迎接移动开发的新时代了吗?让我们一起踏上这段奇妙的旅程吧!
62 1
|
1月前
|
开发框架 Dart 前端开发
前端跨平台开发:React Native vs Flutter
前端跨平台开发:React Native vs Flutter
117 0
|
2月前
|
开发框架 移动开发 Dart
Flutter vs React Native:选择最适合的跨平台移动应用开发框架
本文探讨了Flutter和React Native这两个流行的跨平台移动应用开发框架之间的对比。首先,介绍了Flutter和React Native的基本原理和特点,并强调了它们在性能、开发体验和生态系统方面的优势。然后,通过对比性能、开发体验和生态系统等方面的差异,帮助读者更好地了解两者之间的区别。最后,总结了每个框架的优缺点,并提供了选择适合自身需求框架的建议。无论是开发者还是决策者,本文都将为他们在选择Flutter或React Native时提供一些有价值的指导。
|
4月前
|
前端开发 数据安全/隐私保护 数据格式
【React工作记录三十七】react常见的http网络请求
【React工作记录三十七】react常见的http网络请求
77 0
|
4月前
|
前端开发 数据格式
#yyds干货盘点 【React工作记录三十七】react常见的http网络请求
#yyds干货盘点 【React工作记录三十七】react常见的http网络请求
18 0
相关产品
云迁移中心
推荐文章
更多