React-Native анимации не работают должным образом после setValue - PullRequest
0 голосов
/ 01 октября 2018

У меня есть список элементов, отображаемых в плоском списке, и я анимирую каждый из них.

В конструкторе я присваиваю значения для анимации

constructor(props){
 super(props);
 this.state = { ... };

     this.height = new Animated.Value(SCREEN_WIDTH/1.8);   
     this.width = new Animated.Value(SCREEN_WIDTH/2.5);
}

Поэтому я отображаю элементы по индексу вполучить их различные значения, например:

renderStyle
if(index == 0){
            return {
                marginRight: SCREEN_WIDTH / 35,
                marginLeft: SCREEN_WIDTH / 35,
                margin: SCREEN_WIDTH / 50,
                width: this.width,
                height: this.height,
                opacity: this.state.opacity,
                borderRadius: SCREEN_WIDTH / 36,
            }
        }

        if(index == 1){

            this.height.setValue(SCREEN_WIDTH/1.5);

            return {
                marginRight: SCREEN_WIDTH / 35,
                marginLeft: SCREEN_WIDTH / 35,
                margin: SCREEN_WIDTH / 50,
                width: this.width,
                height: this.height,
                opacity: this.state.opacity,
                borderRadius: SCREEN_WIDTH / 36,
            }
        }

, затем я анимирую элементы, когда пользователь нажимает на них.Индекс = 0 анимирует правильно, но индекс = 1, который я установил новое значение, вообще не анимируется, я не понимаю, что с ним не так?Не могли бы вы объяснить, пожалуйста?

Функция анимации:

Animated.parallel([
            Animated.timing(this.width,{
                toValue: SCREEN_WIDTH/1.2,
                duration: 750
            }),
            Animated.timing(this.height,{
                toValue: SCREEN_HEIGHT/1.2,
                duration: 750
            }),
            Animated.timing(this.state.opacity,{
                toValue: 0,
                duration: 750
            }),
        ]).start(() => this.props.go(item));

        setTimeout(() => Actions.video({item: item}), 800);

Визуализация

return

(
            <Animated.View pointerEvents={this.state.pointer} onLayout={({nativeEvent}) => {
                this.setState({
                    measurements: nativeEvent.layout
                })
            }}>
                <TouchableOpacity onPress={this.captureAnimation.bind(this, item, index)}>
                    <AnimatedImage source={{uri: 'http://' + item.info.picture_path}} style={this.renderStyle(index)}/>

                    </View>
                </TouchableOpacity>
            </Animated.View>
        );

Это другой файл JS, поэтому flatlistработает на домашней странице, и метод renderItem получает значения в этом JS-файле, чтобы иметь возможность анимировать каждое из них.

Редактировать: я нашел альтернативное решение, но в любом случае его не объясняют, почему после установки значения анимация не выполняетсяработа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...