Merhabalar;


Aşağıdaki kodda siteden json olarak kod çekebiliyorum. Ama local json dosyasını bir türlü import edemedim. Cevaplarsanız sevinirim. Local olarak da import etsem dosyayı işime yarayacak.


http://kodflex.com/js/index.json const url kısmına bunu yazdığımda ise bilgileri çekemiyorum. 1 gündür pc başında bir türlü sonuç elde edemedim.

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator,WebView } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

class FlatListDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }
 // https://randomuser.me/api/?seed=1&page=1&results=20
  makeRemoteRequest = () => {
 
   const { page, seed } = this.state;
   const url = 'https://www.json-generator.com/api/json/get/cuhvyyWxSG';


    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

 
 

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  render() {
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={`${item.name.first} ${item.name.last}`}
              subtitle={item.email}
              avatar={{ uri: item.picture.thumbnail }}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
           keyExtractor={item => item.email}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
        />
      </List>
 

    );
  }
}

export default FlatListDemo;import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator,WebView } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";


class FlatListDemo extends Component {
  constructor(props) {
    super(props);


    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false
    };
  }


  componentDidMount() {
    this.makeRemoteRequest();
  }
 // https://randomuser.me/api/?seed=1&page=1&results=20
  makeRemoteRequest = () => {
  
   const { page, seed } = this.state;
   const url = 'https://www.json-generator.com/api/json/get/cuhvyyWxSG';




    this.setState({ loading: true });


    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };


  
 


  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };


  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };


  renderFooter = () => {
    if (!this.state.loading) return null;


    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };


  render() {
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={`${item.name.first} ${item.name.last}`}
              subtitle={item.email}
              avatar={{ uri: item.picture.thumbnail }}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
           keyExtractor={item => item.email} 
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
        />
      </List>
 


    );
  }
}


export default FlatListDemo;

Aşağıdaki video ile sorunu çözdüm.


https://www.youtube.com/watch?v=949O00xF-QQ