Animated.View内部的水平FlatList不起作用

问题描述

我在Animated.View（卡片）中有一个FlatList-（ProvidersList）

我的组件Card使用PanGestureHandler使用TranslateY向上滑动动画

我的ProvidersList是水平的，我需要水平滚动，但是此滚动仅适用于ios

所有代码如下：

请帮助我

我的动画功能

import React,{useEffect,useState} from 'react'
import {AIoUtlinedislike,AIoUtlineLike,aifillCaretDown,aifillDelete,AIoUtlineComment} from "react-icons/all";
import {like,unlike} from "../../redux/post/postActions";
import {connect,useSelector} from "react-redux";
import {deletePost} from '../../redux/post/postActions'
import Moment from 'react-moment'
import {fetchProfile} from "../../redux/profile/profileActions";
import CommentForm from "./comments/CommentForm";
import Comments from "./comments/Comments";

const Posts = ({post,like,unlike,deletePost,fetchProfile}) => {
    useEffect(() => {
        fetchProfile();
    },[fetchProfile]);
    const {auth,profile} = useSelector(state=>state)
    const onLike = (e,id) => {
        // e.preventDefault()
        like(id)
    }

    const onUnlike = (e,id) => {
        // e.preventDefault()
        unlike(id)
    }

    const [BoxDropdown,setBoxDropdown] = useState(false)

    const onClick = () => {
        setBoxDropdown(!BoxDropdown)
    }

    const delPost = (e,id) => {
        e.preventDefault()
        deletePost(id)
    }

    const [showComment,setShowComment] = useState(false)

    const onCommentClick = () => {
        setShowComment(!showComment)
    }

    return (
        <div className="posts">
            <div className="Box-header">
                <aifillCaretDown onClick={onClick} className={"i dropdown-i"} size={"20px"}/>
                {
                    BoxDropdown &&
                    <div className={"Box-dropdown"}>
                        <ul>
                            {
                                auth.user._id === post.user &&
                                <li onClick={(e)=>delPost(e,post._id)}><aifillDelete className={"i"} size={"20px"}/>Delete</li>
                            }
                        </ul>
                    </div>
                }
                <img className={"small-image"} src={profile.profile.image !== null
                && profile.profile.image !== undefined
                && profile.profile.image !== ""
                && post.user === auth.user._id
                    ?
                    profile.profile.image
                    :`${post.avatar}`} alt="avatar"/>
                <div>
                    <h5>{post.name}</h5>
                    <span><Moment fromNow>{post.date}</Moment></span>
                </div>
            </div>
            <p>{post.text}</p>
            <div className="Box-footer">
                    <span onClick={(e)=>onLike(e,post._id)} className={"like"}>
                        <AIoUtlineLike className={"i"} size={"20px"}/> {post.likes.length}
                    </span>
                <span onClick={(e)=>onUnlike(e,post._id)} className={"dislike"}>
                        <AIoUtlinedislike className={"i"} size={"20px"}/> {post.unlikes.length}
                    </span>
                <span onClick={onCommentClick} className={'comment'}>
                        <AIoUtlineComment className={"i"} size={"20px"}/> Comment
                    </span>
            </div>

            {/*<CommentForm post={post} showComment={showComment} />*/}
            <Comments />
        </div>
    )
}

export default connect(null,{like,fetchProfile})(Posts)

JSX代码：

let offset = 0;
  const translateY = new Animated.Value(0);

  const animatedEvent = Animated.event(
    [
      {
        nativeEvent: {
          translationY: translateY,},],{ useNativeDriver: true },);

  function onHandlerStateChanged(event) {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      let opened = false;
      const { translationY } = event.nativeEvent;

      offset += translationY;

      if (translationY >= 100) {
        opened = true;
      } else {
        translateY.setValue(offset);
        translateY.setoffset(0);
        offset = 0;
      }

      Animated.timing(translateY,{
        tovalue: opened ? 380 : 0,duration: 200,useNativeDriver: true,}).start(() => {
        offset = opened ? 380 : 0;
        translateY.setoffset(offset);
        translateY.setValue(0);
      });
    }
  }

JSX代码样式：

<PanGestureHandler
          onGestureEvent={animatedEvent}
          onHandlerStateChange={onHandlerStateChanged}
        >
          <Card
            style={{
              transform: [
                {
                  translateY: translateY.interpolate({
                    inputRange: [-350,380],outputRange: [-50,180],extrapolate: 'clamp',}),}}
          >
            <ProvidersListContainer>
              {/* {providersList &&
                providersList.map(item => (
                  <ScrollView horizontal>
                    <ProviderContainer
                      key={item.personalData.name.first}
                      // onPress={() => handleSelectProvider(provider.id)}
                      onPress={() => navigate('ProfessionalProfile')}
                    >
                      <ProviderAvatar
                        source={item.personalData.profilePicture}
                      />
                      <ProviderName>
                        {item.personalData.name.first}
                      </ProviderName>
                      <ProviderName>
                        {item.profession.name.portuguese}
                      </ProviderName>
                    </ProviderContainer>
                  </ScrollView>
                ))} */}

              <ProvidersList
                data={providersData}
                keyExtractor={provider => provider.id}
                horizontal
                showsHorizontalScrollIndicator={false}
                renderItem={({ item: provider }) => {
                  // console.log('PROVIDEasssasww',provider);
                  return (
                    <ProviderContainer
                      onPress={() => navigate('ProfessionalProfile')}
                    >
                      {/* <ProviderAvatar
                    source={{
                      uri: provider.personalData.profilePicture,}}
                  /> */}

                      <ProviderAvatar source={profilePicture} />
                      <ProviderName>
                        {/* {provider.personalData.name.first} */}
                        El Beatriz
                      </ProviderName>
                      <ProviderDescription>
                        {/* {provider.profession.name.portuguese} */}
                        Pintora
                      </ProviderDescription>
                    </ProviderContainer>
                  );
                }}
              />
            </ProvidersListContainer>
            <CardFooter>
              <ProvidersList
                data={providersData}
                keyExtractor={provider => provider.id}
                horizontal
                showsHorizontalScrollIndicator={false}
                renderItem={({ item: provider }) => {
                  // console.log('PROVIDEasssasww',provider);
                  return (
                    <ProviderContainer
                      onPress={() => navigatetoCreateAppointment(provider.id)}
                    >
                      {/* <ProviderAvatar
                    source={{
                      uri: provider.personalData.profilePicture,}}
                  /> */}

                      <ProviderAvatar source={profilePicture} />
                      <ProviderName>
                        {/* {provider.personalData.name.first} */}
                        El Beatriz
                      </ProviderName>
                      <ProviderDescription>
                        {/* {provider.profession.name.portuguese} */}
                        Pintora
                      </ProviderDescription>
                    </ProviderContainer>
                  );
                }}
              />
            </CardFooter>
          </Card>
        </PanGestureHandler>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）