我想每次都在本机反应中重新创建 Flatlist

Question

请查看共享视频表格了解我的问题

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

我每次都需要 Flatlist 屏幕为空，因为下面的代码每次调用 Flatlist API 然后更改 Flatlist 数据。

应用流程第一屏：显示类别第二屏：显示所选类别报价

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>  
      );
  }
}```

Answer 1

在执行 API 调用之前，您可以清理现有的 DataSource 数组。

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

    });
    ...

Answer 2

您可以通过两种不同的方式处理。

每当您调用 _doApiCall 函数时，将 dataSource 的初始值更改为空数组。

_doApiCall = () => {
  this.setState({
    spinner: true, 
    isLoading: true,
    dataSource: []
  });
}

使用三元运算符，加载数据时使用 diaplay 微调器，如果不使用 diaplay faltlist

{
  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}
    />
}

如有疑问，请随意。希望对你有帮助。

我想每次都在本机反应中重新创建 Flatlist

i want to re create Flatlist every time in react native

javascript

reactjs

react-native

react-native-flatlist