React Native İç içe Listeler

Merhabalar;

React native kullanarak flatlist oluşturdum. Buradaki liste elemanına tıkladığımda istiyorum ki yeni bir flat liste açılsın istiyorum. Ricam bir fikir vermesi açısından router kısmını ne şekilde yapmalıyım. Kullancağım paketler hakkında bilgi verebilirseniz sevinirim. Mesela ilk flatlist elemanım aşağıdaki gibi olsun;


- Korku filmleri
- Macera filmleri
- Aile filmleri


Yukarıdan Korku filmine tıkladığımda aşağıdaki filmlerin açılmasını istiyorum. Filmler embeded kod olarak açılacak;


- Testere 1
- Testere 2


Yukarıdan herhangi birine tıkladığımda da youtube embeded kod ile film açılsın istiyorum. Saygılar. Yorumlarınızı esirmeyiniz.

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