анимация плоского списка Android не работает должным образом - PullRequest
Новая
       40

анимация плоского списка Android не работает должным образом

0 голосов
/ 28 мая 2018

Я пытаюсь сделать анимацию на элементах внутри flatList.Каждый элемент будет отображаться справа налево.На IOS это работает нормально, но на ANDROID нет.

анимация содержит постепенное появление и преобразование: translateX animation.

Если есть другой способ сделать подобное на IOS, я буду рад здесь, этодолжен быть динамический список

компонент FadeInView: 

export class FadeInView extends Component {
state = {
    rightToLeftAnim: new Animated.Value(450),
    fadeAnim: new Animated.Value(0),
};

componentDidMount() {
    Animated.sequence([
        Animated.delay((this.props.index + 1) * 1000),
        Animated.parallel([
            Animated.timing(
                this.state.rightToLeftAnim,
                {
                    toValue: 0,
                    duration: 1000,
                    easing: Easing.inOut(Easing.quad),
                    useNativeDriver: true,
                }
            ),
            Animated.timing(
                this.state.fadeAnim,
                {
                    toValue: 1,
                    duration: 1000,
                    useNativeDriver: true,
                }
            )
        ])
    ]).start();

}

render() {
    let { fadeAnim,rightToLeftAnim } = this.state;

    const rightToLeft = {
        transform: [{translateX: rightToLeftAnim}]
    };

    return (
        <Animated.View                
            style={[rightToLeft,{flex: 1, ...this.props.style, opacity: fadeAnim,}]}
        >
            {this.props.children}
        </Animated.View>
    );
}

}

родительский компонент: 

 class MyPlans extends Component {
  constructor(props) {
    super(props);
   }
    render() {
    return (
        <View>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);
}

ANDROIDIPHONE

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

пожалуйста, используйте свойство getLtemLayou flatList или обновите версию до 0.59.5 и выше.

0 голосов
/ 03 апреля 2019

Дайте style={{flex:1}} для просмотра компонента, который является родителем FlatList. 

return (
        <View style={{flex:1}}>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);
...