RN（react native）入坑指南-08,如何加载远程数据_react 如何加载远程配置-优快云博客

本文是RN（React Native）入坑指南的一部分，讲解如何利用fetch API从远程服务器获取数据，使应用具备动态性。文章简单介绍了fetch的基本用法，并提供了一个展示数据变化的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

　　通过前面的一系列联系现在页面布局技巧已经掌握,页面跳转已经搞定,页面之间的参数传递也已经搞定,我们的代码也进行了分层组织,但我们的应用到现在为止都是死的.如何让应用活起来读取远程数据呢.此篇我们便是用fetch来拉去远程数据
　　当然如果你想了解更多方式和内容欢迎阅读官方文档

开始

fetch可以接受两个参数,fetch(string,object),第一个参数是请求的远程地址;第二个参数是一个可选对象可以设定header,method,body等

现在在我们的代码中添加如下代码

_onRegister(){    
   fetch('http://192.168.191.1:8080/home/register', {
      //请求类型 
      method: 'POST',      
      //请求header
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      // 发送请求参数
      body: JSON.stringify({
        name: 'tom'        
      })
    }).then((response) => response.json())
      .then((jsonData) => {
        // 回写数据
        this.setState({
          text : jsonData.text
        });
      })
      .catch((error) => {
         this.setState({
          text : '获取服务器数据错误'
        });
      });
}

放置一个区域来显示数据文本并且在注册按钮上添加一个点击事件,这样点击的时候就可以看到数据变化了

<Text style={styles.welcome}>
  {this.state.text}
</Text>  

<TouchableHighlight
    style={styles.th}
    underlayColor="rgb(210, 230, 255)"
    onPress={this._onRegister.bind(this)}>
    <Text>注册</Text>               
</TouchableHighlight>