Блог

Я новичок в react-native dev, я хочу иметь простой эффект расширения / высоты слайда после нажатия кнопки, я пытался следовать документам, но анимация react-native совершенно нелепа, имхо.

Мой код довольно прост, представление, которое я хочу анимировать, — это оболочка представления вокруг текста с помощью props.item.body после нажатия на расширенный обратный вызов. Это представление:

 const [ isExpanded, setIsExpanded ] = useState(false);
    const [ maxHeight, setMaxHeight ] = useState(null);
    const [ minHeight, setMinHeight ] = useState(null);
    const [ animation, setAnimation ] = useState(new Animated.Value());
   

    const toggleIsExpanded = () => 
    {
        setIsExpanded(!isExpanded);
    };


<View style={{ width:'100%', flexDirection:'column', position:'relative',}}>
                    <TouchableOpacity style={{ width:'100%', height:50}} onPress={ toggleIsExpanded }>
                        <EntypoIcon name="chevron-small-down" style={{ color:'rgb(68,68,68)', fontSize:20 }}/>
                    </TouchableOpacity>
                    {//How to expand/collapse this?}
                    <View style={{ width:'100%', padding:10 }}>
                        <Text style={{ fontSize:14, color:'rgb(68,68,68)' }}>{ props.item.body }</Text>
                    </View>
                </View>
  

Кто-нибудь может мне помочь?

Большую часть времени Animated хорошо работает в сценариях, где ширина, непрозрачность и т. Д. Являются Заранее известными значениями. Однако в этом случае высота Text полностью зависит от длины тела, и это значение трудно вычислить.

По моему опыту LayoutAnimation , лучше всего работает в этих сценариях, вы просто указываете прямо перед вашим установленным состоянием, что анимация произойдет после изменения состояния. LayoutAnimation выясняет остальное.

Для получения дополнительной информации ознакомьтесь с документацией.

Для обновления вашего кода:

     const defaultAnimation = {
      duration: 200,
      create: {
        duration: 200,
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity,
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut,
      },
    };


    const [ isExpanded, setIsExpanded ] = useState(false);
    const [ maxHeight, setMaxHeight ] = useState(null);
    const [ minHeight, setMinHeight ] = useState(null);
   

    const toggleIsExpanded = () => 
    {
        // This will make sure an animation is trigger after toggling
        LayoutAnimation.configureNext(defaultAnimation);
        setIsExpanded(prev => !prev);
    };

    return (
       <View style={{ width:'100%', flexDirection:'column', position:'relative',}}>
           <TouchableOpacity style={{ width:'100%', height:50}} onPress={ toggleIsExpanded }>
               <EntypoIcon name="chevron-small-down" style={{ color:'rgb(68,68,68)', fontSize:20 }}/>
           </TouchableOpacity>
           {//How to expand/collapse this?}
           {!!expanded amp;amp; (
           <View style={{ width:'100%', padding:10 }}>
               <Text style={{ fontSize:14, color:'rgb(68,68,68)' }}>{ props.item.body }</Text>
           </View>)}
       </View>
    );