React Native 如何将请求获取的username数据渲染为页面文本而非弹窗

核心逻辑 #

React Native 页面渲染的动态内容需要存放在 React 状态中，状态更新后会触发页面自动重渲染，替换原来的弹窗逻辑即可。

函数组件（Hooks 写法） #

• 引入所需依赖

import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

• 定义存储用户名的状态

// 组件内部代码
const [username, setUsername] = useState('');

• 修改原请求逻辑，替换弹窗为状态更新

useEffect(() => {
  // 你原有的数据请求逻辑保持不变
  fetch('你的接口请求地址')
    .then(res => res.json())
    .then(data => {
      // 把原来的 alert(data.username) 替换为下方状态更新代码
      setUsername(data.username);
    })
}, []);

• 页面渲染部分直接使用状态变量

return (
  <View>
    {/* 直接插值展示用户名 */}
    <Text>Welcome {username},</Text>
  </View>
);

类组件写法 #

• 初始化状态

constructor(props) {
  super(props);
  this.state = {
    username: ''
  };
}

• 修改请求逻辑替换弹窗

// 你原有的请求逻辑位置
fetch('你的接口请求地址')
  .then(res => res.json())
  .then(data => {
    // 替换 alert 为状态更新
    this.setState({ username: data.username });
  })

• 渲染阶段使用状态

render() {
  return (
    <View>
      <Text>Welcome {this.state.username},</Text>
    </View>
  );
}

可选优化 #

如果接口请求有网络延迟，可以增加加载态判断，避免刚进入页面时展示空白的欢迎语：

// 函数组件示例
return (
  <View>
    {username ? <Text>Welcome {username},</Text> : <Text>Loading...</Text>}
  </View>
);

内容的提问来源于stack exchange，提问作者moniem Heraki