я хочу заново создавать Flatlist каждый раз, когда реагирует на родной - PullRequest
Новая
       7

я хочу заново создавать Flatlist каждый раз, когда реагирует на родной

0 голосов
/ 10 января 2020

Пожалуйста, проверьте форму общего видео, понимая мою проблему

https://drive.google.com/file/d/1GKU07Mv7IjiLnrfps5gWpfMPsMphvRDv/view

Мне нужно отображать плоский список каждый раз пусто, потому что этот код ниже каждый раз, когда вызывается Flatlist API, а затем после изменения данных Flatlist.

Первый экран приложения Flow: показывает второй экран категории: показывает выбранные кавычки категории 

import { StyleSheet,Button,View, Text,FlatList,Dimensions,TouchableHighlight,Clipboard,ToastAndroid,Share,YellowBox } from 'react-native';
import { createAppContainer,NavigationEvents } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createSwitchNavigator } from 'react-navigation-switch-transitioner'
import Icon from 'react-native-vector-icons/Ionicons';
import Style from '../constants/Style';
import Spinner from 'react-native-loading-spinner-overlay';
export default class QuoteActivity extends React.Component {
  static navigationOptions = ({ navigation }) =>  {
    return {
      title: navigation.getParam('Title', 'Default Title'),
      headerStyle: {
        backgroundColor: navigation.getParam('BackgroundColor', '#5F4B8BFF'),
      },
      headerTintColor: navigation.getParam('HeaderTintColor', '#fff'),
      headerLeft: (  
        <Icon  
        style={{ paddingLeft: 15,paddingTop: 5,color:'#FFFFFF' }}  
        onPress={() => navigation.goBack(null)}  
        name="ios-arrow-back"  
        size={40}  
        />  
        ) 
    };
  };
  constructor(props) {

    super(props);

    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
      ]);

  }

  state = {
    spinner: false,isLoading: false,
    dataSource:[]
  }

  // ON FOCUS CALL API
  componentDidMount() {
    this._doApiCall();
  }

  // API CALL
  _doApiCall = () => {
    this.setState({
      spinner: true,isLoading:true
    });
    const { navigation } = this.props;
    let CategoryId =  navigation.getParam('CategoryId');
    fetch('API_URL', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      }
    }).then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        // SAMPLE JSON
        // {
        //   "data": [
        //   {
        //     "Id": "462",
        //     "CategoryId": "5",
        //     "Title": "Being 'Single' is My Attitude!"
        //   },
        //   {
        //     "Id": "464",
        //     "CategoryId": "5",
        //     "Title": "I never dreamed about success. I worked for it."
        //   }
        //   ],
        //   "success": "1",
        //   "message": "2 Quotes found.",
        //   "service_time": "0.030284881591797 seconds"
        // }
        // SAMPLE JSON END
        spinner:false,isLoading:false,
        dataSource:responseJson.data
      })
    }) 
    .catch((error) => {
      console.error(error);
    });
  };

  // Copy to clipboard
  writeToClipboard = async (text) => {
    await Clipboard.setString(text);
    ToastAndroid.show('Quote copied!', ToastAndroid.SHORT);
  };

  // Share quotes
  shareQuotes = async (text) => {
    const result = await Share.share({
      message:text.toString()+'\n\n Download app from play store',
    });  
  };

  _keyExtractor = (item) => item.id;

  // RENDER DATA ITEMS
  _renderItem = ({item}) => {
    return (
      <View style={Style.CategoryTitleList}>
      <Text style={Style.CategoryTitle}>{item.Title}</Text>
      <View style={[{ flexDirection:'row',justifyContent: 'center',alignItems:'center',textAlign:'center',alignSelf:"center"}]}> 
      <Icon name="ios-copy" onPress={() => this.writeToClipboard(item.Title)} title="Copy" size={25} color="#5F4B8BFF" style={[{margin:5,alignItems:'flex-end',paddingTop:3,paddingRight:20,paddingLeft:20 }]} /> 
      <Icon name="ios-share" onPress={() => this.shareQuotes(item.Title)} size={25} color="#5F4B8BFF" style={[{margin:5,alignItems:'flex-end',paddingTop:3,paddingRight:20,paddingLeft:20 }]} /> 
      </View> 
      </View>

      )
  }
  render() {
    // RENDER DATA ITEMS INSIDE RENDER FNS
    renderItem = ({ item, index }) => {
      return (
        <View style={Style.CategoryTitleList}>
        <Text style={Style.CategoryTitle}>{item.Title}</Text>
        <View style={[{ flexDirection:'row',justifyContent: 'center',alignItems:'center',textAlign:'center',alignSelf:"center"}]}> 
        <Icon name="ios-copy" onPress={() => this.writeToClipboard(item.Title)} title="Copy" size={25} color="#5F4B8BFF" style={[{margin:5,alignItems:'flex-end',paddingTop:3,paddingRight:20,paddingLeft:20 }]} /> 
        <Icon name="ios-share" onPress={() => this.shareQuotes(item.Title)} size={25} color="#5F4B8BFF" style={[{margin:5,alignItems:'flex-end',paddingTop:3,paddingRight:20,paddingLeft:20 }]} /> 
        </View> 
        </View>
        );
    };

    return (

      <View style={Style.QuotesListView}>
      <NavigationEvents 
      onDidFocus={this._doApiCall} 
      onWillFocus={() => this.setState({spinner: true})}
      />

      <FlatList
      data={this.state.dataSource}
      renderItem={renderItem} // USED INSIDE RENDER FNS
      refreshing={this.state.isLoading}
      onRefresh={this._doApiCall}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={1000}
      initialNumToRender={1}
      removeClippedSubviews={false}
      keyExtractor={this._keyExtractor}
      />
      </View>  
      );
  }
}```

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вы можете обрабатывать это двумя различными способами.

  1. всякий раз, когда вы вызываете функцию _doApiCall, измените начальное значение dataSource как пустой массив. 
_doApiCall = () => {
  this.setState({
    spinner: true, 
    isLoading: true,
    dataSource: []
  });
}
Использование троичного оператора, вращающегося набора номера при загрузке данных и, если нет, списка воспроизведения набора символов 
{
  this.state.isLoading ?
    <Show your Spinner /> :
    <FlatList
      data={this.state.dataSource}
      renderItem={renderItem}
      refreshing={this.state.isLoading}
      onRefresh={this._doApiCall}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={1000}
      initialNumToRender={1}
      removeClippedSubviews={false}
      keyExtractor={this._keyExtractor}
    />
}

Не стесняйтесь сомневаться. надеюсь, что это поможет вам.

1 голос
/ 10 января 2020

Перед выполнением вызова API вы можете очистить имеющийся у вас массив DataSource. 

    // API CALL
  _doApiCall = () => {
    this.setState({
      spinner: true,isLoading:true,
      dataSource: []

    });
    ...
...