如何在React Native上的函数中调用类? [英] How to call class in function on React Native?

问题描述

我上课

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

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

    this.arrayholder = [];
      }
    
      componentDidMount() {
        this.makeRemoteRequest();
      }
    
      makeRemoteRequest = () => {
        const data2 = {data} //`https://randomuser.me/api/?&results=20`;
        this.setState({ loading: true });

    fetch(data2)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.results,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.results;
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

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

  searchFilterFunction = text => {
    this.setState({
      value: text,
    });

    const newData = this.arrayholder.filter(item => {
      const itemData = `${item.name.title.toUpperCase()} ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type Here..."
        lightTheme
        round
        onChangeText={text => this.searchFilterFunction(text)}
        autoCorrect={false}
        value={this.state.value}
      />
    );
  };

  render() {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{ source: { uri: item.picture.thumbnail } }}
              title={`${item.name.first} ${item.name.last}`}
              subtitle={item.email}
            />
          )}
          keyExtractor={item => item.email}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

我需要在函数中调用

    function InfoScreen({ navigation }) {
  return (    
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <View style={styles.container_new}>
      <Text style={styles.text}>Basic FlatList Example</Text>
      <FlatList
      ListHeaderComponent={renderHeader} //плюс завтра*/
        data={data}
       // const data2={data} //API_ENDPOINT удалить эту строку 
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text style={styles.listItemText}>{item.name}</Text>
            <Text style={styles.listItemDefinition}>{item.price}</Text>
          </View> 
        )}
      /> //end of Flatlist
    </View>     
    </View> 
 );//end of return
} //end of InfoScreen

该课程应帮助我制定可搜索的列表.我将此功能用作导航屏幕之一.我想在当前列表中导入该类，但是它不起作用.我该怎么做?该类的描述应该在主函数之前，内部还是在函数之后?

This class should help me make a searchable flatlist. I use this function as one of the navigating screens. I want to import the class on the current list, but it's not working. How can I do it? Should the description of the class be before the main function, inside it or after the function?

推荐答案

添加导出默认类FlatListDemo扩展了组件{

并将其导入您的文件中.然后可以像在InfoScreen中使用FlatList一样使用它

And import it in your file. Then you can use it like you use FlatList in InfoScreen

<FlatListDemo props />

这篇关于如何在React Native上的函数中调用类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！