React Native에서 로컬 JSON 파일에서 데이터를 가져 오는 방법은 무엇입니까?

103

JSON과 같은 로컬 파일을 저장 한 다음 컨트롤러에서 데이터를 가져 오려면 어떻게해야합니까?

json react-native local-files

— Mrded
소스

145

React Native 0.4.3부터 다음과 같이 로컬 JSON 파일을 읽을 수 있습니다.

const customData = require('./customData.json');

그런 다음 일반 JS 객체처럼 customData에 액세스합니다.

— 베드로
소스

이 구문이 여전히 지원됩니까? 내 코드에서이 구문을 사용할 수 없기 때문입니다.

— Sohail Mohabbat Ali

1

iOS 용 React Native 0.26.2와 함께 작동하는 것 같습니다. 확인 react-native -v하고 package.json.

— 피터

전용 파일 customData.json, 다른 방법의 첫번째 3500 문자를 저장 CUSTOMDATA 큰 파일 @ 피터을로드

— Akki

@Akki 여러 개의 작은 파일로 나누시겠습니까?

— Simon Forsberg

완벽하게 작동합니다-Q : 왜 대신 import 구문을 사용할 수 없습니까?

— dod_basim

111

ES6 / ES2015 버전 :

import customData from './customData.json';

— PaulMest
소스

그것은 어떤 이름을하거나 할 가지고 있었다customData

— farmcommand2

2

@ farmcommand2 모든 이름이 될 수 있습니다. import myJsonFile from './foobar.json';

— PaulMest

1

방금 React Native 0.57로 시도했는데 .json 확장자가 필요하지 않은 것 같습니다.

— Manuel Zapata

1

@ManuelZapata 맞습니다. 접미사를 제외하면 모듈 해석기는 작동하는 것을 찾을 때까지 다른 확장을 시도합니다. 여기에 더 많은 정보 : nodejs.org/api/modules.html#modules_all_together

— PaulMest

17

ES6 / ES2015의 경우 다음 과 같이 직접 가져올 수 있습니다 .

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

typescript를 사용하는 경우 다음과 같이 json 모듈을 선언 할 수 있습니다.

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

— 리틀 로이스
소스

10

이것을 사용하십시오

import data from './customData.json';

— 무 다시 르 자카 리아
소스

2

어쩌면 당신은 사용할 수 AsyncStorage setItem 과 의 getItem을 한 후 사용 ... 그리고 문자열로 데이터를 저장 json으로 파서를 JSON으로 다시 변환을 위해 ...

— clagccs
소스

1

이 Github 문제를 살펴보십시오.

https://github.com/facebook/react-native/issues/231

그들은 requireJSON 이 아닌 파일, 특히 JSON을 시도하고 있습니다. 지금은이 작업을 수행하는 방법이 없으므로 @CocoOS가 언급 한대로 AsyncStorage를 사용하거나 필요한 작업을 수행하기 위해 작은 네이티브 모듈을 작성할 수 있습니다.

— 콜린 램지
소스