React Native求助：组件值传递至另一场景并用于POST请求

看起来你需要完成的核心流程是：点击列表里的姓名 → 拿到对应邮箱 → 通过POST请求传递到详情页 → 展示该邮箱匹配的用户信息。我帮你梳理完整的实现方案，补全你的代码逻辑：

第一步：完善用户列表组件（ListaUsers） #

首先要确保每个姓名项是可点击的，并且点击时能把对应的邮箱传递出去。假设你的用户数据是包含name和email的数组：

import React from 'react';
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';

// 接收用户数组和点击回调
const ListaUsers = ({ users, onNamePress }) => {
  return (
    <View style={styles.listWrap}>
      {users.map((user, idx) => (
        <TouchableOpacity
          key={user.email} // 用邮箱做唯一key，比index更可靠
          style={styles.listItem}
          onPress={() => onNamePress(user.email)}
        >
          <Text style={styles.nameText}>{user.name}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  listWrap: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 10,
  },
  listItem: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  nameText: {
    fontSize: 18,
    color: '#333',
  },
});

export default ListaUsers;

第二步：主页面处理点击事件并跳转 #

这里用React Navigation（RN官方推荐的导航库）来实现页面跳转，先确保你已经安装依赖：npm install @react-navigation/native @react-navigation/native-stack

主页面代码：

import React from 'react';
import ListaUsers from './ListaUsers';
import BarraNavegacao from './BarraNavegacao';
import { View, Alert } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const UserListScreen = () => {
  const navigation = useNavigation();
  // 模拟用户数据，实际可以从接口获取
  const userList = [
    { name: 'Bráulio Joelson', email: 'braulio@example.com' },
    { name: 'Maria Silva', email: 'maria@example.com' },
  ];

  // 点击姓名后的回调：拿到邮箱，跳转到详情页
  const handleNameClick = (email) => {
    // 可选：添加邮箱格式校验
    if (!email.includes('@')) {
      Alert.alert('提示', '邮箱格式不正确');
      return;
    }
    // 携带邮箱参数跳转到详情页
    navigation.navigate('UserInfo', { targetEmail: email });
  };

  return (
    <View style={{ flex: 1 }}>
      <BarraNavegacao />
      <ListaUsers users={userList} onNamePress={handleNameClick} />
    </View>
  );
};

export default UserListScreen;

第三步：详情页接收邮箱，发送POST请求获取用户信息 #

创建用户详情页面，接收传递的邮箱，发送POST请求到后端，然后渲染返回的用户信息：

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, Alert } from 'react-native';
import { useRoute } from '@react-navigation/native';

const UserInfoScreen = () => {
  const route = useRoute();
  const { targetEmail } = route.params; // 接收传递的邮箱
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 发送POST请求获取用户信息
    const fetchUserInfo = async () => {
      try {
        const response = await fetch('你的后端API地址', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ email: targetEmail }), // 把邮箱作为请求体发送
        });

        if (!response.ok) throw new Error('请求失败，请稍后重试');
        
        const data = await response.json();
        setUserData(data);
      } catch (err) {
        Alert.alert('错误', err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserInfo();
  }, [targetEmail]);

  // 加载状态展示
  if (isLoading) {
    return (
      <View style={styles.centerWrap}>
        <ActivityIndicator size="large" color="#2196F3" />
      </View>
    );
  }

  // 渲染用户信息
  return (
    <View style={styles.container}>
      <Text style={styles.title}>用户信息</Text>
      <Text style={styles.infoItem}>姓名：{userData?.name}</Text>
      <Text style={styles.infoItem}>邮箱：{userData?.email}</Text>
      <Text style={styles.infoItem}>手机号：{userData?.phone}</Text>
      {/* 更多用户信息字段，根据后端返回调整 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  centerWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  infoItem: {
    fontSize: 18,
    marginVertical: 8,
    color: '#333',
  },
});

export default UserInfoScreen;

第四步：配置导航栈 #

最后需要把两个页面配置到导航容器中，让跳转生效：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import UserListScreen from './UserListScreen';
import UserInfoScreen from './UserInfoScreen';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="UserList">
        <Stack.Screen name="UserList" component={UserListScreen} options={{ title: '用户列表' }} />
        <Stack.Screen name="UserInfo" component={UserInfoScreen} options={{ title: '用户详情' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

一些注意事项 #

1. 如果你不用React Navigation，也可以用其他导航方案，但React Navigation是目前最稳定、文档最完善的选择。
2. 请替换代码中的你的后端API地址为实际的后端接口，确保接口能正确接收POST请求中的email参数并返回用户信息。
3. 可以根据需求增加更多错误处理逻辑，比如网络断开时的提示。

内容的提问来源于stack exchange，提问作者Bráulio Joelson