Question

我想在平面清单项目中使用动画。我创建动画功能以及位于渲染中的样式。但是我不能使用该样式，因为我的renderItem函数已超出渲染范围，我该怎么办？我的意思是，我们如何才能使用位于render中的const以及位于render外的其他函数？

state = {
        animation: new Animated.Value(1)
    };

startAnimation = () => {
        Animated.timing(this.state.animation, {
            toValue: 1.5,
            duration: 1500
        }).start();
    }

_renderItem = ({item}) => {

   return(
            <Animated.View style={[animatedStyles]} >
                <TouchableOpacity onLongPress={() => this.activateItem(item.id)} onPress={() => this.startAnimation}>
                    <Image source={ images[item.item_id].uri } style={{width: 60, height: 60}}/>
                </TouchableOpacity>
            </Animated.View>
        );

    };


    render(){

        const animatedStyles = {
            transform: [
                {
                    scale: this.state.animation
                }
            ]
        };

        return(

            <View style={{flex: 1}}>

                <FlatList
                      numColumns={4}
                      contentContainerStyle={{flexDirection: 'column', justifyContent: 'space-between', marginRight: 10, marginLeft: 10}}
                      data={this.state.items}
                      renderItem={this._renderItem}
                      keyExtractor={this._keyExtractor}
                />

            </View>

        );

Answer 1

没有理由不能在_renderItem函数中访问this.state，因此在这种情况下，应在此处进行设置。

_renderItem = ({item}) => {
   return(
          <Animated.View style={{ transform: [{ scale: this.state.animation]}} >
            <TouchableOpacity onLongPress={() => this.activateItem(item.id)} onPress={() => this.startAnimation}>
            <Image source={ images[item.item_id].uri } style={{width: 60, height: 60}}/>
          </TouchableOpacity>
        </Animated.View>
    );

};

您还需要将其添加到FlatList道具中。 extraData道具告诉行在更改时重新渲染。

extraData={this.state.animation}

如何在React-Native中从渲染获取var / const

1 个答案: