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

1. import React, { Component } from 'react';  
2. import {  
3.   AppRegistry,  
4.   StyleSheet,  
5.   Image,  
6.   Text,  
7.   TouchableHighlight,  
8.   TextInput,  
9.   StatusBar,  
10.   View  
11. } from 'react-native';  
12. import constantData from './data/SimpleSample.json';  
13.   
14. export default class ViewProject extends Component {  
15.   
16.      _onChangeText(newText) {  
17.         console.log('inputed text:' + newText);  
18.     }  
19.   
20.     componentWillMount() {  
21.     console.log("constantData  taype is ="+typeof(constantData));  
22.     console.log("employees  taype is ="+typeof(constantData.employees));  
23.     console.log("employees  length = "+constantData.employees.length);  
24.     console.log("No.1 givenName ="+constantData.employees[0].giveName);  
25.     console.log("No.1 FamilyName ="+constantData.employees[0].giveName);  
26.     console.log("No.1 Salary"+constantData.employees[0].salary);  
27.     console.log("type of No.1 Salary"+typeof(constantData.employees[0].salary));  
28.     }  
29.   
30.   render() {  
31.     return (  
32.       <View style={styles.container}>  
33.         <Text  
34.           onChangeText={(newText)=>{this._onChangeText(newText)}}  
35.         />  
36.       </View>  
37.     );  
38.   }  
39.   
40.   
41. }  
42.   
43.   
44.   
45. const styles = StyleSheet.create({  
46.   container: {  
47.     flex:1,  
48.     justifyContent: 'center',  
49.     alignItems: 'center',  
50.     backgroundColor:'#F5FCFF'  
51.   }  
52. });  
53. AppRegistry.registerComponent('ViewProject', () => ViewProject);