จะดึงข้อมูลจากไฟล์ JSON ในเครื่องบน react native ได้อย่างไร

103

ฉันจะจัดเก็บไฟล์ในเครื่องเช่น JSON แล้วดึงข้อมูลจากคอนโทรลเลอร์ได้อย่างไร

json react-native local-files

146

เนื่องจาก React Native 0.4.3 คุณสามารถอ่านไฟล์ JSON ในเครื่องของคุณได้ดังนี้:

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

จากนั้นเข้าถึง customData เหมือนออบเจ็กต์ JS ทั่วไป

— ปีเตอร์
แหล่งที่มา

ไวยากรณ์นี้ยังรองรับอยู่ไหม เพราะฉันไม่สามารถใช้ไวยากรณ์นี้ในโค้ดของฉันได้

— Sohail Mohabbat Ali

1

ดูเหมือนว่าจะทำงานร่วมกับ React Native 0.26.2 สำหรับ iOS คุณอาจต้องการตรวจสอบreact-native -vและลองอ่านไฟล์package.json.

— เตอร์

CustomData เพียงการจัดเก็บ 3500 ตัวอักษรตัวแรกของไฟล์ customData.json, ใด ๆ ทางอื่นที่จะโหลดไฟล์ขนาดใหญ่ @ Peter

— Akki

@Akki แบ่งเป็นไฟล์เล็ก ๆ หลาย ๆ ไฟล์?

— Simon Forsberg

ทำงานได้อย่างสมบูรณ์ - ถาม: ทำไมฉันจึงใช้ไวยากรณ์การนำเข้าแทนไม่ได้

— dod_basim

111

ES6 / ES2015 เวอร์ชัน:

import customData from './customData.json';

— PaulMest
แหล่งที่มา

มันจะมีชื่ออะไรหรือcustomData

— เปล่า

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

18

สำหรับ 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';

— Mudassir Zakaria
แหล่งที่มา

2

บางทีคุณอาจใช้AsyncStorage setItemและgetItem ... และจัดเก็บข้อมูลเป็นสตริงจากนั้นใช้ตัวแยกวิเคราะห์ json เพื่อแปลงอีกครั้งเป็น json ...

— กรงเล็บ
แหล่งที่มา

1

ดูปัญหา Github นี้:

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

พวกเขาพยายามrequireใช้ไฟล์ที่ไม่ใช่ JSON โดยเฉพาะ JSON ตอนนี้ไม่มีวิธีการทำดังนั้นคุณต้องใช้ AsyncStorage ตามที่ @CocoOS กล่าวถึงหรือคุณอาจเขียนโมดูลเนทีฟขนาดเล็กเพื่อทำสิ่งที่คุณต้องทำ

— โคลินแรมเซย์
แหล่งที่มา