无法在 React 本机应用程序内部有效滚动
Can't efficiently scroll iniside React native application
我只是一个初学者,一直在做一个需要尽快完成的项目。我已经通过 API 获取了 5000 多个数据列表,但是,该列表在滚动时效率不高,因此破坏了应用程序。我一直在 React Native
中搜索 FlatList
组件,但我无法在我的项目中正确实施。
有人可以提供有关如何解决此问题的建议。我在下面附上了我的源代码-
import React, {Component} from 'react';
import {Text, View, FlatList, ScrollView } from 'react-native';
import axios from 'axios';
import GalleryDetail from './GalleryDetail';
class GalleryList extends Component {
state = { photos: []};
componentWillMount() {
axios.get('http://jsonplaceholder.typicode.com/photos')
.then(response => this.setState({ photos: response.data })).
catch((error)=> console.warn("fetch Error: ", error));
}
renderPhotos() {
return this.state.photos.map( photos =>
<GalleryDetail key={photos.id} photos= {photos}/>
);
}
render () {
return (
<View>
<ScrollView>
{this.renderPhotos()}
</ScrollView>
</View>
);
}
}
export default GalleryList;
我的 GalleryDetail 在哪里
import React, {Component} from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photos.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photos.title}</Text>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 50,
width: 50
},
textStyle: {
textAlign: 'right',
marginLeft: 3,
marginRight: 3,
}
}
export default GalleryDetail;
抱歉没有提供正确的代码段。请帮助
首先,您应该按照文档中的说明在 componentDidMount 中进行网络调用。
其次,不要使用 ScrollView,因为它性能不佳,而且在使用 FlatList 时,您不再需要 ScrollView。
第三,更新 GalleryDetail 以使用 props.photo 而不是 props.photos,因为您将单个对象传递给每一行(复数形式使它违反直觉)。并通过照片对象中的item
属性访问数据:
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photo.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photo.title}</Text>
</CardSection>
</Card>
);
};
最后,使用以下代码段
render() {
if (!this.state.photos) {
return <ActivityIndicator/>;
}
return (
<FlatList
data={this.state.photos}
keyExtractor={this.keyExtractor}
renderItem={this.renderPhoto}
/>
);
}
keyExtractor = (photo, index) => photo.id;
renderPhoto = ({item}) => {
return < GalleryDetail photo={item} />;
};
我只是一个初学者,一直在做一个需要尽快完成的项目。我已经通过 API 获取了 5000 多个数据列表,但是,该列表在滚动时效率不高,因此破坏了应用程序。我一直在 React Native
中搜索 FlatList
组件,但我无法在我的项目中正确实施。
有人可以提供有关如何解决此问题的建议。我在下面附上了我的源代码-
import React, {Component} from 'react';
import {Text, View, FlatList, ScrollView } from 'react-native';
import axios from 'axios';
import GalleryDetail from './GalleryDetail';
class GalleryList extends Component {
state = { photos: []};
componentWillMount() {
axios.get('http://jsonplaceholder.typicode.com/photos')
.then(response => this.setState({ photos: response.data })).
catch((error)=> console.warn("fetch Error: ", error));
}
renderPhotos() {
return this.state.photos.map( photos =>
<GalleryDetail key={photos.id} photos= {photos}/>
);
}
render () {
return (
<View>
<ScrollView>
{this.renderPhotos()}
</ScrollView>
</View>
);
}
}
export default GalleryList;
我的 GalleryDetail 在哪里
import React, {Component} from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photos.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photos.title}</Text>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 50,
width: 50
},
textStyle: {
textAlign: 'right',
marginLeft: 3,
marginRight: 3,
}
}
export default GalleryDetail;
抱歉没有提供正确的代码段。请帮助
首先,您应该按照文档中的说明在 componentDidMount 中进行网络调用。
其次,不要使用 ScrollView,因为它性能不佳,而且在使用 FlatList 时,您不再需要 ScrollView。
第三,更新 GalleryDetail 以使用 props.photo 而不是 props.photos,因为您将单个对象传递给每一行(复数形式使它违反直觉)。并通过照片对象中的item
属性访问数据:
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photo.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photo.title}</Text>
</CardSection>
</Card>
);
};
最后,使用以下代码段
render() {
if (!this.state.photos) {
return <ActivityIndicator/>;
}
return (
<FlatList
data={this.state.photos}
keyExtractor={this.keyExtractor}
renderItem={this.renderPhoto}
/>
);
}
keyExtractor = (photo, index) => photo.id;
renderPhoto = ({item}) => {
return < GalleryDetail photo={item} />;
};