Kann nicht .json Inhalt aus Datei mit React-native

Question

ziehen Ich versuche, den Inhalt dieser .json Datei (colors.json) zu ziehen. Ich weiß nicht wirklich, was das Problem mit meinem Code ist. Kann nicht verstehen den richtigen Anruf in dem Text-Tag

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" 
     } 
    ] 
} 

Bild von Output (Edit)

aus

Answer 1

Sie müssen eine Schleife für das Farben-Array in der render() -Methode ausführen, um die einzelnen Farben hexValue anzuzeigen.

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> 
); 
}