React native 如何设置根据内容类型更改的模态高度的动画？
我有一个基于状态字符串改变高度的模式。不同的高度可以工作，但我正在尝试找出如何在高度过渡之间平滑地设置动画。现在，我有一个平滑的过渡，从模态打开到最终高度，然后关闭，但是当模态在完全关闭之前改变高度时，没有平滑的动画可以向下滑动 例如： 当我点击一个按钮时，我的模态动画高度为70。 一旦我从模型内部单击一个按钮，我的模型将平滑地动画到60的高度。 一旦我再次从我的模态内部点击一个按钮，我的模态应该平滑地动画到40的高度 当我第一次打开它和完全关闭它时，模态有一个平滑的上下滑动动画，但上面提到的中间步骤没有React native 如何设置根据内容类型更改的模态高度的动画？,react-native,animation,React Native,Animation,我有一个基于状态字符串改变高度的模式。不同的高度可以工作，但我正在尝试找出如何在高度过渡之间平滑地设置动画。现在，我有一个平滑的过渡，从模态打开到最终高度，然后关闭，但是当模态在完全关闭之前改变高度时，没有平滑的动画可以向下滑动 例如： 当我点击一个按钮时，我的模态动画高度为70。 一旦我从模型内部单击一个按钮，我的模型将平滑地动画到60的高度。 一旦我再次从我的模态内部点击一个按钮，我的模态应该平滑地动画到40的高度 当我第一次打开它和完全关闭它时，模态有一个平滑的上下滑动动画，但上面提到的中
export interface Props {
expanded?: boolean;
maxHeightPercentage?: number;
onClose?: () => void;
onOpen?: () => void;
onOpened?: () => void;
onClosed?: () => void;
}
export const Overlay: React.FC<Props> = ({
expanded = false,
onClose,
onOpen,
onClosed,
onOpened,
maxHeightPercentage = 67,
children,
}) => {
const [expandedInternal, setExpandedInternal] = useState(false);
const previousExpandedInternal = usePrevious(expandedInternal);
useEffect(() => {
if (expanded !== expandedInternal) {
setExpandedInternal(expanded);
}
}, [expanded, expandedInternal]);
const theme = useContext(ThemeContext);
const overlayHeight = useRef(new Animated.Value(0));
useEffect(() => {
if (expandedInternal !== previousExpandedInternal) {
expandedInternal ? onOpen?.() : onClose?.();
const callback = expandedInternal ? onOpened : onClosed;
const toValue = expandedInternal ? 1 : 0;
Animated.timing(overlayHeight.current, {
toValue,
duration: 500,
easing: Easing.linear,
useNativeDriver: false,
}).start(callback);
}
}, [expandedInternal, onClose, onOpen, onOpened, onClosed, previousExpandedInternal]);
return (
<Animated.View
style={
{
height: overlayHeight.current.interpolate({
inputRange: [0, 1],
outputRange: ["0%", `${maxHeightPercentage}%`],
}),
},
}>
{children}
</Animated.View>
);
};
导出接口道具{
扩展？：布尔；
最大高度百分比？：数字；
onClose？：（）=>无效；
onOpen？：（）=>无效；
OnOpen？：（）=>无效；
一旦关闭？：（）=>无效；
}
导出常量覆盖：React.FC=({
扩展=假，
一旦失去，
奥诺彭，
一旦关闭，
开放的，
最大高度百分比=67，
儿童
}) => {
const[expandedInternal，setExpandedInternal]=useState（false）；
const previousExpandedInternal=使用Previous（expandedInternal）；
useffect（（）=>{
如果（已展开！==已展开内部）{
设置内部扩展（扩展）；
}
}，[扩展，内部扩展]；
const theme=useContext（ThemeContext）；
const overlayHeight=useRef（新的动画.Value（0））；
useffect（（）=>{
if（expandedInternal！==以前的expandedInternal）{
扩展内部？onOpen？（）：onClose？（）；
const callback=expandedInternal？onOpened:onClosed；
常数toValue=expandedenternal？1:0；
动画。计时（overlayHeight.current{
toValue，
持续时间：500，
放松：放松，线性，
useNativeDriver：错误，
}).启动（回调）；
}
}，[ExpandedEnternal，onClose，onOpen，onOpened，onClosed，PreviousExpandedEnternal]；
返回(
{儿童}
);
};