React Native如何调用JSON内嵌链接API并在新页面渲染数据

你现有列表页的逻辑已经完成了90%，剩下两个功能直接按下面步骤改：

• 列表页现有行点击传参逻辑已经正确，点击时已经把整行数据（包含link字段）通过路由传给Edit页，不需要额外修改列表页的跳转代码。
• 新建Edit页面，在页面初始化时读取路由参数里的link字段，请求二级接口拿数据渲染即可。
• 确认路由栈里已经注册Edit页面。

Edit页面完整示例代码 #

import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView, ScrollView, Text, View, ActivityIndicator } from 'react-native';
import { DataTable } from 'react-native-paper';
import COLORS from '../src/conts/colors';

const Edit = ({route}) => {
  // 取列表页传过来的行数据
  const { item } = route.params;
  const [detail, setDetail] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 调用link对应的二级接口
    fetch(item.link)
      .then(res => res.json())
      .then(json => setDetail(json))
      .catch(err => console.error('详情接口请求失败:', err))
      .finally(() => setLoading(false))
  }, [item.link])

  // 加载态
  if (loading) {
    return (
      <SafeAreaView style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#50E3C2" />
      </SafeAreaView>
    )
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView contentContainerStyle={{paddingTop: 40, paddingHorizontal: 20}}>
        <Text style={styles.pageTitle}>详情信息</Text>
        <Text style={styles.subTitle}>{item.title}</Text>
        {/* 下面根据二级接口实际返回的字段调整渲染结构即可，示例为通用遍历渲染 */}
        <View style={styles.card}>
          {detail && Object.entries(detail).map(([key, val]) => (
            <View style={styles.row} key={key}>
              <Text style={styles.label}>{key}：</Text>
              <Text style={styles.value}>
                {typeof val === 'object' ? JSON.stringify(val) : val}
              </Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  pageTitle: {
    color: COLORS.black,
    fontSize: 32,
    fontWeight: 'bold',
    fontFamily: 'Roboto',
    textAlign: 'center'
  },
  subTitle: {
    color: COLORS.grey,
    fontSize: 18,
    marginVertical: 10,
    fontFamily: 'Roboto',
    textAlign: 'center'
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    marginTop: 20
  },
  row: {
    flexDirection: 'row',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0'
  },
  label: {
    width: 100,
    color: '#777',
    fontFamily: 'Roboto'
  },
  value: {
    flex: 1,
    color: '#333',
    fontFamily: 'Roboto'
  }
})

export default Edit;

路由注册检查 #

确保你的导航配置里已经添加Edit页的路由，参考配置：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import List from './你的列表页文件路径';
import Edit from './你刚创建的Edit页文件路径';

const Stack = createNativeStackNavigator();

export default function RootNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="List">
        <Stack.Screen name="List" component={List} options={{headerShown: false}} />
        <Stack.Screen name="Edit" component={Edit} options={{title: '详情'}} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

提示：如果二级接口返回的是固定字段结构（比如和列表页一样有title、price、content这类字段），直接把通用遍历部分替换成你需要的Text、DataTable组件即可，写法和列表页一致。如果请求报错，先打印item.link确认拿到的是完整可访问的接口地址。

内容的提问来源于stack exchange，提问作者HASSANE BOUKHAL