React Native开发：搜索后点击特定成员如何跳转新页面查看完整详情

你需要先集成React Native主流的路由导航库React Navigation来实现页面跳转，以下是完整操作步骤：

1. 安装配置React Navigation #

首先安装依赖包：

# 核心依赖
npm install @react-navigation/native
# 原生栈导航依赖
npm install @react-navigation/native-stack
# 纯React Native原生项目需额外安装环境依赖，Expo项目可跳过
npm install react-native-screens react-native-safe-area-context

然后修改项目根入口文件（通常是index.js或App.js），配置全局导航容器：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
// 导入你原来的搜索页面，建议重命名为SearchScreen
import SearchScreen from './SearchScreen';
// 导入后面要创建的详情页
import MemberDetailScreen from './MemberDetailScreen';

const Stack = createNativeStackNavigator();

function RootApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Search">
        <Stack.Screen 
          name="Search" 
          component={SearchScreen} 
          options={{title: '成员搜索'}}
        />
        <Stack.Screen 
          name="MemberDetail" 
          component={MemberDetailScreen} 
          options={{title: '成员详情'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default RootApp;

2. 创建成员详情页 #

新建MemberDetailScreen.js文件，用于展示成员完整信息：

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

const MemberDetailScreen = ({route}) => {
  // 获取跳转传递的成员数据
  const {member} = route.params;

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>{member.FM_NAME_EN}</Text>
      <View style={styles.infoItem}>
        <Text>性别：{member.GENDER}</Text>
      </View>
      <View style={styles.infoItem}>
        <Text>EPIC编号：{member.EPIC_NO}</Text>
      </View>
      <View style={styles.infoItem}>
        <Text>手机号：{member.MOBILE_NO}</Text>
      </View>
      <View style={styles.infoItem}>
        <Text>年龄：{member.age}</Text>
      </View>
      <View style={styles.infoItem}>
        <Text>门牌号：{member.houseNumber}</Text>
      </View>
      {/* 按需添加其他需要展示的字段 */}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  infoItem: {
    marginBottom: 12,
    fontSize: 16,
  }
});

export default MemberDetailScreen;

3. 修改原有搜索页代码 #

你原来的代码可以保持大部分逻辑不变，只需要修改getItem函数替换alert为跳转逻辑，同时优化keyExtractor配置：

// 原来的getItem函数替换为以下逻辑
const getItem = (item, navigation) => {
  // 跳转到详情页，同时传递当前选中的成员数据
  navigation.navigate('MemberDetail', {member: item});
};

// 修改ItemView组件，传入navigation
const ItemView = ({item, navigation}) => {
  return (
    <Text
      style={styles.itemStyle}
      onPress={() => getItem(item, navigation)}>
      {item.FM_NAME_EN}
      {'\n'}
      {item.GENDER.toUpperCase()}
    </Text>
  );
};

// 修改FlatList的renderItem和keyExtractor配置
<FlatList
  data={filteredDataSource}
  // 用Firebase的文档id作为唯一key，性能更优
  keyExtractor={(item) => item.id}
  ItemSeparatorComponent={ItemSeparatorView}
  renderItem={({item, navigation}) => <ItemView item={item} navigation={navigation} />}
/>

可选优化 #

如果你的成员字段非常多，路由传参会有性能损耗，可以只传成员id到详情页，在详情页根据id再次请求Firebase拉取完整数据，避免传参过大。

内容的提问来源于stack exchange，提问作者kazim ali