Làm cách nào để tìm nạp dữ liệu từ tệp JSON cục bộ trên phản ứng gốc?

103

Làm cách nào để lưu trữ các tệp cục bộ như JSON và sau đó tìm nạp dữ liệu từ bộ điều khiển?

json react-native local-files

— nghiền nát
nguồn

146

Vì React Native 0.4.3, bạn có thể đọc tệp JSON cục bộ của mình như sau:

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

và sau đó truy cập customData như một đối tượng JS bình thường.

— peter
nguồn

Cú pháp này vẫn được hỗ trợ? bởi vì tôi không thể sử dụng cú pháp này trong mã của mình.

— Sohail Mohabbat Ali

1

Có vẻ như hoạt động với React Native 0.26.2 cho iOS. Bạn có thể muốn kiểm tra react-native -vvà thử đọc package.json.

— peter

customData chỉ lưu trữ 3500 ký tự đầu tiên của tệp customData.json, Bất kỳ cách nào khác để tải tệp lớn @peter

— Akki

@Akki Chia nó thành nhiều tệp nhỏ hơn?

— Simon Forsberg

Nó hoạt động hoàn hảo - Hỏi: Tại sao tôi không thể sử dụng cú pháp nhập để thay thế?

— dod_basim

111

Phiên bản ES6 / ES2015:

import customData from './customData.json';

— PaulMest
nguồn

nó có thể có bất kỳ tên hoặc dùng nó phảicustomData

— farmcommand2

2

@ farmcommand2 Nó có thể là bất kỳ tên nào. import myJsonFile from './foobar.json';

— PaulMest

1

Tôi vừa thử với React Native 0.57 và có vẻ như phần mở rộng .json là không cần thiết.

— Manuel Zapata

1

@ManuelZapata Điều đó chính xác. Nếu bạn loại trừ hậu tố, trình phân giải mô-đun sẽ thử các phần mở rộng khác nhau cho đến khi tìm thấy phần mở rộng hoạt động. Thông tin thêm tại đây: nodejs.org/api/modules.html#modules_all_together

— PaulMest 17/02/19

18

Đối với ES6 / ES2015, bạn có thể nhập trực tiếp như:

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


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

Nếu bạn sử dụng typecript, bạn có thể khai báo mô-đun json như:

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

— Little Roys
nguồn

10

Dùng cái này

import data from './customData.json';

— Mudassir Zakaria
nguồn

2

có thể bạn có thể sử dụng AsyncStorage setItem và getItem ... và lưu trữ dữ liệu dưới dạng chuỗi, sau đó sử dụng trình phân tích cú pháp json để chuyển đổi lại thành json ...

— clagccs
nguồn

1

Hãy xem vấn đề Github này:

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

Họ đang cố gắng tạo requirecác tệp không phải JSON, cụ thể là JSON. Không có phương pháp nào để thực hiện việc này ngay bây giờ, vì vậy bạn phải sử dụng AsyncStorage như @CocoOS đã đề cập hoặc bạn có thể viết một mô-đun gốc nhỏ để thực hiện những gì bạn cần làm.

— Colin Ramsay
nguồn