abdurrahmanekr / ReactNativeLoginApp

React Native ile Login Uygulaması Örneği
http://www.avarekodcu.com/aramayap/etiket/react-native-login-uygulaması
11 stars 3 forks source link

tab içinde tekrar kendini yenileme #8

Closed ahmetozalp closed 5 years ago

ahmetozalp commented 7 years ago

Örnek vermek gerekirse şu sayfada: Bu sayfa da tekrar aynı companent e data atıp tekrar kendini yenilemesini istiyorum bunu nasıl yapabilirim?

main-page.js sayfasından bu tabı çagırırken içine props atıyorum

null şeklinde daha sonra newstab javascript sayfası şu şekılde kodları

import React, { Component } from 'react';

import {
    Text
} from 'react-native';

import { View, Image, Subtitle, ListView,Row,Caption,Spinner,Divider,Icon } from '@shoutem/ui'

export default class NewsTab extends Component {
  constructor(props){
    super(props);
    this.state = {
      kategoriler: [],
      showLoading: true
    }

    this.kategoriler(this.props.name);
  }

  kategoriler(prop){
      fetch("http://192.168.1.35/kategoriler/"+prop, {
          method: "GET",
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      })
      .then((response) => response.json())
      .then((response) => {
          this.setState({ kategoriler: response, showLoading: false });
      })
      .catch(err => {
          this.setState({ message: 'Veriler Çekilemedi Lütfen Tekrar Deneyiniz!', showLoading: false });
      });
  }

  renderRow(kategori) {
    return ( <Row styleName="small">
          <Icon name="web" />
          <View styleName="vertical">
            <Subtitle>{kategori.title}</Subtitle>
          </View>
          <Icon styleName="disclosure" name="right-arrow" />
      </Row> );
  }

  render() {
    return (
      <View>
        <Divider styleName="section-header">
          <Caption>Kategori Takip Et</Caption>
        </Divider>

        {!!this.state.message && (
          <Text
              style={{fontSize: 14, color: 'red', padding: 5}}>
              {this.state.message}
          </Text>
        )}

        <ListView
          data={this.state.kategoriler}
          renderRow={this.renderRow}
        />

        {!!this.state.showLoading === true && (
        <View
          style={{
            marginTop: 70,
            flex: 1,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}>
                  <Spinner/>
              </View>
        )}

      </View>
    );
  }
}

bu ustte verdigim kod sayfasında listeden bir elemana tıkladıgımda tekrar o sayfaya tıklanan elemanın props'u gitcek ve o sayfadakı listelenen veriler yenılencek boyle bişi yapılabilir mi?

abdurrahmanekr commented 7 years ago

Recursive component kullanmak sakıncalı. Bu sorunu yaşayabilirsin. Özünü yinelemek yerine değerlerini değiştirerek yine o component'i kullanabilirsin. Eğer yapacağın bir liste ise, yeni bir component oluştur ona döngü at. Recursive kullanmamanı tavsiye ederim.

BugraGulay commented 1 year ago

Tam olarak nasıl çözüme bağladınız yardımcı olursanız sevinirim.