React Native 之读取JSON 文件

最新推荐文章于 2024-03-09 17:54:10 发布

转载最新推荐文章于 2024-03-09 17:54:10 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lmService/p/8616320.html

文章标签：

#json #移动开发 #javascript #ViewUI

本文介绍如何在React Native项目中创建并读取JSON文件，包括文件放置位置、使用import导入JSON数据及在组件中展示数据的具体实现。

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

{"employees":[{"FamilyName":"张","giveName":"三","salary":1},{"FamilyName":"李","giveName":"四","salary":2},{"FamilyName":"王","giveName":"二","salary":3}]}

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

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