我正在使用react-native的CameraRoll API编写图像选择器，并将其呈现在FlatList组件内的CameraRollScreen中。该组件采用一个名为maxPhotos的道具，例如3，当用户选择3张照片时，所有其他照片都将被禁用（无法再选择），看起来像这样（这就是我现在拥有的，它可以正常工作，但不是表演者）：
如您所见，当我选择3张照片（这是限制）时，所有其他照片都被一个透明视图覆盖（已禁用）。这不是高性能的，在GIF中似乎不是这样，但是当在真实设备上运行时，此问题不再可以忽略。选择前两张照片不会造成任何延迟，但是，选择最后一张照片时，由于必须禁用所有其他照片，因此会变得迟钝。但是我不知道如何在不将其他照片一一禁用的情况下禁用其他照片。这是我为图像选择器准备的代码：
由于每个图像都有不同的状态，因此我还将每张照片都命名为PureComponent，其状态如下：
{
uri: '',
index: -1 // if not selected, it's -1, if selected, it denotes
// the position of the photo in the 'selectedPhotos'
// array
disabled: false // Whether it should be disabled
}
CameraRollImage组件：class CameraRollImage extends PureComponent {
constructor(props) {
super(props);
this.state = {
uri: '',
index: -1,
disabled: false
};
this.onSelectPhoto = this.onSelectPhoto.bind(this);
}
componentWillMount() {
const { uri, index, disabled } = this.props;
this.setState({ uri, index, disabled });
}
componentWillReceiveProps(nextProps) {
const { uri, index, disabled } = nextProps;
this.setState({ uri, index, disabled });
}
onSelectPhoto() {
const { uri, index } = this.state;
this.props.onSelectPhoto({ uri, index });
// 'onSelectPhoto' is a method passed down to each photo
// from 'CameraRollScreen' component
}
render() {
const { uri, index, disabled } = this.state;
return (
<View style={{ ... }}>
<TouchableOpacity
disabled={disabled}
onPress={this.onSelectPhoto}
>
<Image
source={{ uri }}
style={{ ... }}
/>
</TouchableOpacity>
// If disabled, render a transparent view that covers the photo
{disabled && <View
style={{
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
width: ... height: ...
}}
/>}
// render the index here
</View>
);
}
}
export default CameraRollImage;
然后，在
CameraRollImage组件中：class CameraRollScreen extends Component {
constructor(props) {
super(props);
this.state = {
allPhotos: [], // all photos in camera roll
selectedPhotos: []
};
this.onSelectPhoto = this.onSelectPhoto.bind(this);
this.renderPhoto = this.renderPhoto.bind(this);
}
componentWillMount() {
// Access the photo library to grab all photos
// using 'CameraRoll' API then push all photos
// to 'allPhotos' property of 'this.state'
}
onSelectPhoto({ uri, index }) {
let { selectedPhotos } = { ...this.state };
if (index === -1) {
// this means that this photo is not selected
// and we should add it to 'selectedPhotos' array
selectedPhotos.push(uri);
} else {
_.pullAt(selectedPhotos, index);
}
this.setState({ selectedPhotos });
}
renderPhoto({ item }) {
// item is the uri of the photo
const { selectedPhotos } = this.state;
const index = _.indexOf(selectedPhotos, item);
// A photo should be disabled when reach the limit &&
// it's not selected (index === -1)
return (
<CameraRollImage
uri={item}
index={index}
onSelectPhoto={this.onSelectPhoto}
disabled={index === -1 && selectedPhotos.length >= 3}
/>
);
}
render() {
const { allPhotos } = this.state;
return (
<FlatList
data={allPhotos}
extraData={this.state}
...
...
numColumns={3}
renderItem={this.renderPhoto}
/>
);
}
}
export default CameraRollScreen;
我的照片库中只有100张照片，而且已经造成了滞后，许多人都想办法比我多得多的照片，这样会造成灾难，但是我应该如何在
CameraRollScreen中更新这么多照片？或者，我应该完全使用FlatList吗？ 最佳答案
找到了解决方案，这要感谢Pir Shukarullah Shah和RaphaMex。首先，让我们看一下更新的图像选择器：
如果我像在GIF中那样足够快地向下滚动，则许多图像都不会渲染，而当我到达它们时它们就会被渲染。这似乎是正确的，为什么当它们不在屏幕上时仍要渲染它们？我所做的是利用了onViewableItemsChanged的FlatList：
<FlatList
...
...
keyExtractor={(item) => item} // This is important!!!
onViewableItemsChanged={this.onViewablePhotosChanged}
initialNumberToRender={Math.ceil(SCREEN_HEIGHT / IMAGE_SIZE) * 3}
...
/>
然后，
onViewablePhotosChanged方法：onViewablePhotosChanged({ viewableItems }) {
let viewablePhotos = [];
viewableItems.forEach((item) => viewablePhotos.push(item.key));
this.setState({ viewablePhotos });
// Here, every object in 'viewableItems' has a key, which
// is the key you provided in 'keyExtractor={(item) => ...}',
// I used the 'uri' of each photo as the key, that's why
// I am pushing viewable photos' uri's to 'viewablePhotos' array
}
最后，修改
renderPhoto函数以传递viewable道具renderPhoto({ item }) {
...
...
return (
<CameraRollImage
...
...
viewable={_.include(this.state.viewablePhotos, item)}
/>
);
}
然后，在渲染图像的
CameraRollImage组件中，有一个名为viewable的道具，如果viewable === false，我们根本不更新它：componentWillReceiveProps(nextProps) {
const { ..., ..., viewable } = nextProps;
if (!viewable) {
this.setState({ viewable: false });
return;
}
...
...
}
更好！！！如果
viewable为false，我们将渲染一个相等大小的空视图以节省内存，而不是渲染图像，以节省内存，如果只有100张照片，这似乎并不重要：render() {
if (!this.state.viewable) {
return (
<View
style={{
width={IMAGE_SIZE}
height={IMAGE_SIZE}
}}
/>
);
}
return (
<Image
...
...
/>
);
}