React Native中如何遍历键值对象并将键显示到组件中

嘿，这事儿其实不难搞定！要把你提供的键值对象里的键（比如ETH_SAN、ETH_LINK）渲染成React Native的<Text>组件，咱们可以借助JavaScript的Object.keys()方法，配合React的列表渲染来实现，具体做法如下：

步骤说明 #

1. 用Object.keys()提取对象中所有的键，它会返回一个包含所有键的数组（比如['ETH_SAN', 'ETH_LINK']）。
2. 用React的map()方法遍历这个数组，把每个键转化为一个<Text>组件，记得给每个组件加上唯一的key属性（这里直接用键本身就行，因为它们是唯一的）。

完整代码示例 #

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

const MarketKeyDisplay = () => {
  // 你的市场数据对象
  const marketData = {
    ETH_SAN: { 
      last: '0.000981', 
      high: '0.0010763', 
      low: '0.0009777', 
      lowestAsk: '0.00098151', 
      highestBid: '0.0007853', 
      percentChange: '-1.83619353', 
      baseVolume: '7.3922603247161', 
      quoteVolume: '7462.998433' 
    },
    ETH_LINK: { 
      last: '0.001', 
      high: '0.0014', 
      low: '0.001', 
      lowestAsk: '0.002', 
      highestBid: '0.001', 
      percentChange: '-28.57142857', 
      baseVolume: '13.651606265667369466', 
      quoteVolume: '9765.891979953083752189' 
    }
    // 其他市场数据可以继续往后加...
  };

  // 提取所有市场键
  const marketKeys = Object.keys(marketData);

  return (
    <View>
      {marketKeys.map((key) => (
        <Text key={key}>{key}</Text>
      ))}
    </View>
  );
};

export default MarketKeyDisplay;

额外优化（可选） #

如果需要给Text组件添加样式，直接在<Text>标签里加style属性就行，比如：

<Text 
  key={key} 
  style={{ 
    fontSize: 16, 
    marginVertical: 8, 
    color: '#333' 
  }}
>
  {key}
</Text>

这样渲染出来的结果就和你期望的一样，会依次显示<Text>ETH_SAN</Text>和<Text>ETH_LINK</Text>啦！

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