如何在React Native上的函数中调用类? [英] How to call class in function on React Native?
本文介绍了如何在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屋!
查看全文