Как использовать выборку файла JSON в реагировать родной - PullRequest
Новая
       14

Как использовать выборку файла JSON в реагировать родной

0 голосов
/ 24 сентября 2019

Как использовать данные json в плоском списке?

Это код, который у меня есть 

import React, { Component } from 'react'
import { Text, View, Button, YellowBox, FlatList, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper'
import {styles} from '../style/styles'

class NavtexPage extends Component {
  constructor(props) {//function
    YellowBox.ignoreWarnings([
      'Warning: componentWillReceiveProps is deprecated',
      'Warning: componentWillUpdate is deprecated',
    ]);
    super(props);
    this.state = {
      indexPage: 0,
      isLoading: true,
    }
  }

  //fetch API
  componentDidMount = () => {
    fetch('http://localhost:3000/jsondb/2',
      {
        method: "GET",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      })//여기까지 fetch : requests 
      .then((response) => response.json())//fetch : response
      .then((responseData) => {
        console.log("성공 : ", responseData);
        this.setState({
          isLoading: false,
          data: responseData
        })
      })
      .catch((error) => {
        console.error("api error : " + error.message);
      });
  }

  //_renderItem how to json
  _renderItem = ({ item, index }) => {
    console.log('json : ', item);    
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 0.1, backgroundColor: 'green' }}>
          <Text>NAVTEX</Text>
        </View>
          <View>
            <FlatList//i don't know
              style={{ flex: 1, marginTop: 50, borderWidth: 1, borderColor: 'red' }}
              data={this.state.data}
              numColumns={1}
              renderItem={this._renderItem}
              // keyExtractor={(item, index) => item.no.toString()}
              keyExtractor={(item => )}
              />
          </View>//help
      </View>
    );
  }
}

export default NavtexPage;

---------------------------- ex.json 

 [
        {
            "Page1_1" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "",
                }
            ]
        },
        {
            "Page1_2" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "Ping to 155.155.1.2 (NAVTEX TX2 at HF Site)",
                    "action_img" : "",
                    "is_ok" : "",
                }
             ]
          }
    ]

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Во-первых, вам нужно проанализировать json для массива или объекта, а затем назначить его для данных плоского списка 

  .then((responseData) => {
    let result = Json.parse(responseData)
   // you data is array,and have page
    let curPageData = result.page1_1
    this.setState({
      isLoading: false,
      data: curPageData
    })
  })
0 голосов
/ 24 сентября 2019

Вы также можете попробовать функцию карты.

пример кода: - 

this.state.data.map((data) => { //main data array

 return(

  data.map((insideData) => { //you can access page1_1 ... pages

   return(

    <Text>{insideData.main_subject}</Text> 
    .....

   )

  })      

 )     

})
...