很抱歉，找不到一个直接的标题，所以提前感谢。
我的任务是创建一个由我制作的API提供的链接页面，该页面连接到CMS。该屏幕收集了以下数据，可以在屏幕上查看：

Title,
Content

这些项目与URL沿着存在于“资源”中。URL对用户不可见，但它与自己的标题和内容分组。
目前屏幕上显示的东西都是正确的，但是当我尝试连接资源的URL时，我无法正确导航页面。当我使用console.log（thing-I 'm-returning）时，它会将所有资源的URL发送给我，如果私人浏览器打开一个网页，它可能会打开列表中的任何一个。当我按下任何资源时，就会发生这种情况。
下面的代码（第一次张贴，我完全绝望。让我知道，如果这看起来像垃圾，我会纠正，但理想）。
第一次
这是视图，虽然我不确定是否有必要在这里。

<View>
        <ResourceNavigationList
          onPress={handleOpenSite}
          small
          listItems={resourceList}
          backgroundColor="transparent"
        />
</View>

下面是ResourceNavigationList组件，它可能就是问题所在，因为它有点无意义。

const ResourceNavigationList = ({
  listItems,
  backgroundColor,
  small,
  reverse,
  onPress,
}) => {
  const { ct } = useCountryTranslation();
  const colorScheme = useColorScheme();
  const bgColor = backgroundColor || Colors[colorScheme].altBackground;
  const { openUrl } = useWebBrowser();

  const renderItem = ({ item, rUrl }) => {
    const handleOnPress = () => {
      if (item) {
        openUrl(rUrl).toString();
        console.log("WHY AREN'T YOU OPENING?");
      }
    };

    return (
      <ResourceNavigationListItem
        key={key}
        reverse={reverse}
        small={small}
        item={item}
        // url={rUrl}
        onPress={onPress}
      />
    );
  };

  return (
    <FlatList
      renderItem={renderItem}
      data={listItems}
      keyExtractor={(item) => item.id}
      style={{
        paddingVertical: 20,
        backgroundColor: bgColor,
      }}
    />
  );
};

ResourceNavigationList.propTypes = {
  listItems: PropTypes.array.isRequired,
  backgroundColor: PropTypes.string,
  small: PropTypes.bool,
  reverse: PropTypes.bool,
  onPress: PropTypes.func,
};

export default ResourceNavigationList;

最后，下面是资源导航列表项

const ResourceNavigationListItem = ({ item, onPress, style, small }) => {
  const styles = StyleSheet.create({
    //styling is here, but leaving it off because it isn't relevant and took up a lot of space
  });

  return (
    <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
      <View style={styles.title}>
        <Icon style={styles.linkArrow} size={16} icon={faExternalLink} />
      </View>
      <View style={styles.title}>
        <Text style={styles.titleText}>
          {item.title ? decode(item.title) : item.title}
        </Text>
      </View>
      <View style={styles.title}>
        <Text style={styles.titleText}>
          {item.content ? decode(item.content) : item.content}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

ResourceNavigationListItem.propTypes = {
  item: PropTypes.shape({
    icon: PropTypes.object,
    title: PropTypes.string,
    content: PropTypes.string,
  }).isRequired,
  onPress: PropTypes.func,
  style: PropTypes.object,
  small: PropTypes.bool,
};

export default ResourceNavigationListItem;

非常感谢。
我尝试过mapping和for循环，尝试过将mapping直接应用于组件，这些都是我最成功的尝试，我尝试过的其他大多数方法都没有返回任何结果，或者多次返回所有结果。
我已经挣扎了几天，并找到了很多解决方案类似于我的问题在stackoverflow，但没有完全相关的/最近的（我是相当新的关于后端tingz）.如果你们都发生了什么我错过了，请善良，如果你会下来帮助我，我会非常感激.