无法使用React-native从文件中提取.json内容

Question

我正在尝试提取此.json文件(colors.json)的内容。我真的不知道我的代码有什么问题。无法在Text标记

中找出正确的调用

react-native-cli: 2.0.1
react-native: 0.39.0

Quote.js

var colors = require('./colors.json');

class Quote extends Component {
    render () {
    return (
     <View style={styles.container}>
          <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text>
          **<Text style={styles.quote}> {colors.hexValue}</Text>**          
     </View>
    )
   }
}

Colors.json

{
    "colorsArray":[{
            "colorName":"red",
            "hexValue":"#f00"
        },
        {
            "colorName":"green",
            "hexValue":"#0f0"
        },
        {
            "colorName":"blue",
            "hexValue":"#00f"
        },
        {
            "colorName":"black",
            "hexValue":"#000"
        }
    ]
}

输出图像（编辑）

Answer 1

您需要在render（）方法中对colors数组执行循环，以显示每种颜色的hexValue。

render () {
  return (
    <View style={styles.container}>
      <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text>
      {
        colors.colorsArray.map((color, index) => {
          return <Text key={index} style={styles.quote}>{color.hexValue}</Text>;
        })
      }        
    </View>
  );
}