javascript - 从 slider 中删除图像不会显示任何内容

Question

我正在与 react-native-image-slider 合作 slider 与图像数组完美配合。我想在特定索引滑动时删除特定图像。假设滑动多个图像后，我位于索引 6，现在我想删除索引 6 处可用的图像。当我我正在使用 javascript splice 方法来删​​除并在删除后使用更新的数组设置状态，我无法在 slider 中看到任何内容。任何人都可以在这里帮助我。

谢谢

我的组件删除功能代码:-

var newArray=[];
newArray=
this.state.imageFlatlist.splice(index, 1) &&  this.state.imageFlatlist;
    this.setState({
                imageFlatlist : newArray,
                isImageDeleted:true

    })

我的渲染代码:-

<ImageSlider images={this.state.imageFlatlist} onPositionChanged={position => 
     this._currentImagePosition(position)} style={{ flex: 1, }}

这是插件代码:-

_move(index) {
        console.log("movein to index:- " ,index);
        const width = Dimensions.get('window').width;
        const to = index * -width;
        if (!this.state.scrolling) {
            return;
        }
        Animated.spring(this.state.left, {toValue: to, friction: 10, tension: 50}).start();
        if (this.state.timeout) {
            clearTimeout(this.state.timeout);
        }
        this.setState({position: index, timeout: setTimeout(() => {
            this.setState({scrolling: false, timeout: null});
            if (this.props.onPositionChanged) {
                this.props.onPositionChanged(index);
            }
        }, 500)});
    }

    _getPosition() {
        if (typeof this.props.position === 'number') {
            return this.props.position;
        }
        return this.state.position;
    }

    componentWillReceiveProps(props) {
        if (props.position !== undefined) {
            this.setState({scrolling: true});
            this._move(props.position);
        }
    }

    componentWillMount() {
        alert("Hey");
        const width = Dimensions.get('window').width;

        if (typeof this.props.position === 'number') {
            this.state.left.setValue(-(width * this.props.position));
        }

        let release = (e, gestureState) => {
            const width = Dimensions.get('window').width;
            const relativeDistance = gestureState.dx / width;
            const vx = gestureState.vx;
            let change = 0;
            console.log("relative Distance:- " , relativeDistance);
            console.log("**VX**" , vx);

            if (relativeDistance < -0.5 || (relativeDistance < 0 && vx <= 0.5)) {
                change = 1;
            } else if (relativeDistance > 0.5 || (relativeDistance > 0 && vx >= 0.5)) {
                change = -1;
            }
            const position = this._getPosition();
            console.log("Position:-   " , position);
            if (position === 0 && change === -1) {
                change = 0;
            } else if (position + change >= this.props.images.length) {

                change = (this.props.images.length) - (position + change);
            }
            this._move(position + change);
            return true;
        };

        this._panResponder = PanResponder.create({
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dx) > 5,
            onPanResponderRelease: release,
            onPanResponderTerminate: release,
            onPanResponderMove: (e, gestureState) => {

                const dx = gestureState.dx;
                const width = Dimensions.get('window').width;
                const position = this._getPosition();
                let left = -(position * width) + Math.round(dx);
                if (left > 0) {
                    left = Math.sin(left / width) * (width / 2);
                } else if (left < -(width * (this.props.images.length - 1))) {
                    const diff = left + (width * (this.props.images.length - 1));
                    left = Math.sin(diff / width) * (width / 2) - (width * (this.props.images.length - 1));
                }
                this.state.left.setValue(left);
                if (!this.state.scrolling) {
                    this.setState({scrolling: true});
                }
            },
            onShouldBlockNativeResponder: () => true
        });
    }

    componentWillUnmount() {
        if (this.state.timeout) {
            clearTimeout(this.state.timeout);
        }
    }

    render() {
        const customStyles = this.props.style ? this.props.style : {};
        const width = Dimensions.get('window').width;
        const height = this.props.height || this.state.height;
        const position = this._getPosition();

        return (<View>
            <Animated.View
                style={[styles.container, customStyles, {height: height, width: width * this.props.images.length, transform: [{translateX: this.state.left}]}]}
                {...this._panResponder.panHandlers}>
                    {this.props.images.map((image, index) => {
                    console.log("image in lib ***" , this.props.images);
                    console.log("**lib index***"  ,  index);

                        const imageComponent = <Image
                                                key={index}
                                                source={{uri: image}}
                                                style={{height: position === index || this.state.scrolling ? height : 0, width}}
                                              />;
                    return imageComponent;


                    })}
            </Animated.View>
            {/* <View style={styles.buttons}>
                {this.props.images.map((image, index) => {
                    return (<TouchableHighlight
                        key={index}
                        underlayColor="#ccc"
                        onPress={() => {
                            this.setState({scrolling: true});
                            return this._move(index);
                        }}
                        style={[styles.button, position === index && styles.buttonSelected]}>
                            <View></View>
                    </TouchableHighlight>);
                })}
            </View> */}
        </View>);
    }

Answer 1

问题出在 slider 代码中的这一行: {this.props.images.map((image, index) => ... 似乎图像并不意味着动态更新，因为在 React 中 props 不会改变，状态用于此我建议您通过简单地在状态中添加 images 属性来重写代码

export default class ImageSlider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            images: [], // <-----------
            position: 0,
            height: Dimensions.get('window').width * (4 / 9),
            width: Dimensions.get('window').width,
            scrolling: false,
        };
    }
    ...

然后添加这个

componentWillReceiveProps(nextProps){
   if(nextProps.images){
      this.setState(() => ({images: nextProps.images}))
   }
}

最后像这样在渲染中使用它们

{this.state.images.map((image, index) => ...

编辑

如何不可变地拼接数组:

在顶部从“lodash”导入_然后

const newArray = _.remove(this.state.imageFlatlist, (image, i) => i == index);