React Native - перевод позиции плоского списка вне списка - PullRequest
Новая
       7

React Native - перевод позиции плоского списка вне списка

0 голосов
/ 23 января 2020

У меня экран разделен на две гибкие половины. Первая половина содержит текстовое поле и кнопку. Вторая половина содержит плоский список. Текст при вводе текста добавляется к элементам плоского списка.

Я хочу анимировать элемент сверху текстового ввода в верхнюю часть плоского списка. Но элемент, кажется, находится под первой половиной (или не виден, когда он должен быть больше первой половины) во время анимации, и его можно увидеть только из заголовка плоского списка и далее. Я не добавил переполнение: «скрыто».

Как сделать так, чтобы при переводе элемент отображался вне плоского списка? 

<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}/>}
/>

Анимированный элемент 

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>
        );
    }
}
...