Question

上下滑动动画。

如何在react native中实现此代码：

var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;

window.onload = function() {
    var controller = document.getElementById('slide');
    var slider = document.getElementById('slider');
    slider.style.height = minheight + 'px'; //not so imp,just for my example
    controller.onclick = function() {  
        clearInterval(timer);
        var instanceheight = parseInt(slider.style.height);  // Current height
        var init = (new Date()).getTime(); //start time
        var height = (toggled = !toggled) ? maxheight: minheight; //if toggled

        var disp = height - parseInt(slider.style.height);
        timer = setInterval(function() {
            var instance = (new Date()).getTime() - init; //animating time
            if(instance <= time ) { //0 -> time seconds
                var pos = instanceheight + Math.floor(disp * instance / time);
                slider.style.height =  pos + 'px';
            }else {
                slider.style.height = height + 'px'; //safety side ^^
                clearInterval(timer);
            }
        },1);
    };
};

在此处进行测试：http://jsbin.com/azewi5/5

此视图我想让您做上下滑动的动画：

<View style={{ backgroundColor: "rgb(69, 86, 196)", alignContent: "center", flexDirection: "row", width: 360, marginLeft: 15, marginRight: 15,}}>  
            <FlatList
                data={summaryCopy}
                contentContainerStyle={styles.list}
                renderItem={({item}) => (
                <TouchableNativeFeedback
                  onPress={this.nada}
                  background={ TouchableNativeFeedback.SelectableBackground() }>
                  <View style={ styles.Tarea }>
                    <Image source={{uri: item[3]}} style={{width: 60, height: 60, marginTop: 10}}/>
                    <Text style={{textAlign: "center", color: "gray"}}>{item[1]}</Text>                  
                  </View>
                </TouchableNativeFeedback>
                )}
                keyExtractor={(id, index) => id}
              />
          </View>

您总是必须在视图中放置高度才能制作动画吗？不能随单位列表元素的数量而变化

如何在React Native中实现此代码？

0 个答案: