React Native 之讀取JSON 檔案
阿新 • • 發佈:2018-12-30
一:建立json 檔案 放在 ./data/目錄下
{
"employees": [
{
"FamilyName": "張",
"giveName": "三",
"salary": 1
},
{
"FamilyName": "李",
"giveName": "四",
"salary": 2
},
{
"FamilyName": "王",
"giveName": "二",
"salary": 3
}
]
}
二:在index.android.js檔案中讀取
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);