Question

我将屏幕分成两个可弯曲的两半。前半部分包含一个文本框和一个按钮。下半部分包含一个列表。文本输入中的文本会优先添加到平面列表项目中。

我想使文本输入上方的内容动画化到平面列表的顶部。但是，在进行动画制作时，该项目似乎位于前半部分的下方（或者应该位于上半部的情况下则不可见），并且只能从自定义列表的标题开始才能看到。我还没有添加溢出：“隐藏”。

翻译时如何使项目显示在平面列表之外？

<View style={{ flex: 1}}>
    <TextInput ...props/>
    <Button ...props/>
</View> 
<FlatList
    style={{ flex: 1}}
    data={this.state.data}
    keyExtractor={item => item}
    ListHeaderComponent={
        <Text>List of items</Text>
    }
    ListEmptyComponent={
        <Text>No items</Text>}
    renderItem={({item})=> <Animateditem item={item}/>}
/>

Animateditem组件

class Animateditem extends Component {
    constructor(props){
        super(props);
        this.animatedValue = new Animated.Value(-500);
    }

    componentDidMount(){
        Animated.timing(this.animatedValue, {
            toValue: 0,
            duration: 4000,
            useNativeDriver: true,
            easing: Easing.ease
          }).start();
    }

    render() {
        return (
            <Animated.View style={[styles.itemWrapper, { transform: [{translateY: this.animatedValue }]}]}>
                <View style={styles.item}>
                    <Text style={{ fontSize: 14 }}>
                        {this.props.item}
                    </Text>
                </View>
                <View style={styles.itemSeparator} />
            </Animated.View>
        );
    }
}

React Native-在列表外平移列表项的位置

0 个答案: