React Native 之读取JSON 文件

一：创建json 文件  放在  ./data/目录下

{

    "employees": [

        {

            "FamilyName": "张",

            "giveName": "三",

            "salary": 1

        },

        {

            "FamilyName": "李",

            "giveName": "四",

            "salary": 2

        },

        {

            "FamilyName": "王",

            "giveName": "二",

            "salary": 3

        }

    ]

}

二：在index.android.js文件中读取

[javascript] view
plain copy

import React, { Component } from 'react';  

import {  

  AppRegistry,  

  StyleSheet,  

  Image,  

  Text,  

  TouchableHighlight,  

  TextInput,  

  StatusBar,  

  View  

} from 'react-native';  

import constantData from './data/SimpleSample.json';  

  

export default class ViewProject extends Component {  

  

     _onChangeText(newText) {  

        console.log('inputed text:' + newText);  

    }  

  

    componentWillMount() {  

    console.log("constantData  taype is ="+typeof(constantData));  

    console.log("employees  taype is ="+typeof(constantData.employees));  

    console.log("employees  length = "+constantData.employees.length);  

    console.log("No.1 givenName ="+constantData.employees[0].giveName);  

    console.log("No.1 FamilyName ="+constantData.employees[0].giveName);  

    console.log("No.1 Salary"+constantData.employees[0].salary);  

    console.log("type of No.1 Salary"+typeof(constantData.employees[0].salary));  

    }  

  

  render() {  

    return (  

      <View style={styles.container}>  

        <Text  

          onChangeText={(newText)=>{this._onChangeText(newText)}}  

        />  

      </View>  

    );  

  }  

  

  

}  

  

  

  

const styles = StyleSheet.create({  

  container: {  

    flex:1,  

    justifyContent: 'center',  

    alignItems: 'center',  

    backgroundColor:'#F5FCFF'  

  }  

});  

AppRegistry.registerComponent('ViewProject', () => ViewProject);