如何为React Native渲染数组中的Pressable按钮添加页面导航

核心问题是你当前把JSX元素存在state中，导致无法在渲染Pressable时访问导航上下文。解决方案是只存储原始数据，在组件内部渲染JSX，这样就能直接使用导航功能。

步骤1：重构数据获取逻辑，只保存原始数据 #

修改数据获取函数，返回Firestore文档的原始数据数组，而非JSX元素：

const queryData = async () => {
  const querySnapshot = await firestore()
    .collection('Jobs')
    .where('driver', '==', 'TBA')
    .get();
  
  // 将文档转换为包含id和数据的对象数组
  return querySnapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));
};

const returnArray = async () => {
  // 直接返回原始数据数组
  return queryData();
};

步骤2：在JobRequestList组件内使用导航并渲染Pressable #

在组件中获取导航对象，遍历原始数据渲染Pressable，同时在点击事件中传递对应数据：

import { useNavigation } from '@react-navigation/native';

const JobRequestList = () => {
  const [data, setData] = useState([]);
  const navigation = useNavigation(); // 在此获取导航对象

  useEffect(() => {
    returnArray().then(data2 => {
      setData(data2);
    });
  }, []);

  if (data.length === 0) {
    return (
      <ScrollView>
        <View key={'ERROR'} style={styles.wrapperERROR}>
          <Text style={styles.textError}> No Current Job Requests </Text>
        </View>
      </ScrollView>
    );
  }

  return (
    <ScrollView>
      {data.map(item => (
        <Pressable
          key={item.id}
          style={styles['wrapper' + item.PD]}
          onPress={() => {
            // 跳转至JobInfo并传递当前项的数据
            navigation.navigate('JobInfo', { jobData: item });
          }}>
          <Text style={styles.text}> {item.PD} </Text>
          <Text style={styles.text}> {item.address} </Text>
          <Text style={styles.text}> {item.time} </Text>
        </Pressable>
      ))}
    </ScrollView>
  );
};

步骤3：在JobInfo页面接收传递的数据 #

在JobInfo组件中通过route参数获取跳转时传递的job数据：

const JobInfo = ({ route }) => {
  const { jobData } = route.params;

  return (
    <View>
      <Text>Job PD: {jobData.PD}</Text>
      <Text>Address: {jobData.address}</Text>
      <Text>Time: {jobData.time}</Text>
    </View>
  );
};

改动原因说明 #

• 原写法将JSX存入state，脱离了组件的导航上下文，无法访问useNavigation对象。
• 存储原始数据符合React状态管理最佳实践，便于后续数据修改、过滤，也让渲染逻辑更清晰。
• 直接在组件内渲染Pressable，可直接调用导航函数，同时轻松传递当前项数据到目标页面。

内容的提问来源于stack exchange，提问作者Jesse Barrass