React Native: Constraining Animated.Value

Я делаю приложение React-Native, и сценарий таков: Я хочу, чтобы пользователь мог панорамировать представление, но не полностью так, как он хочет. Я хочу, чтобы ограничивал количество просмотров при перетаскивании пользователем.React Native: Constraining Animated.Value

Я прочитал документацию как API PanResponder, так и Animated (несколько раз), но не может найти что-либо, что делает это, и я не могу найти кого-либо другого, который бы реализовал что-то подобное.

Сдерживание на мероприятии panresponder?

onPanResponderMove: Animated.event([null,{ 
    dx: this.state.pan.x, //Some function here to constrain the value? 
    dy: this.state.pan.y 
}]),

Ограничение при применении преобразований?

style = { 
    transform: { 
     transformX: ...,//Use interpolate to constrain the values somehow? 
     transformY: ... 
    } 
}

источник

2016-04-20 stinodes

Проверьте [Animated.Value] (https://facebook.github.io/react-native/docs/animated.html), это позволит вам контролировать любого «Анимация» принимает значения 0 - 1, но вы можете использовать ее для проверки специальных значений «MAX» и «MIN» для вашего вида. –

. Интерполируется, но я не думаю, что на самом деле это ограничивает значения, не так ли? Насколько я могу судить, он только перенаправляет их. – stinodes

интерполяция поддерживает ограничение с помощью экстраполяции. Из документов: Вы можете установить экстраполяцию, установив параметры экстраполяции, экстраполяции или экстраполяции. Значение по умолчанию расширяется, но вы можете использовать зажим для предотвращения превышения выходного значения outputRange. – David

Решение, предоставляемое @stinodes, ухудшит производительность. Почему не использовать interpolate следующим образом:

const maxX = 200; 
const constrainedX = this.state.pan.x.interpolate({ 
    inputRange: [0, maxX, Infinity], 
    outputRange: [0, maxX, maxX] 
})

источник

2017-08-11 09:42:50 mieszko4

Вы правы! Прошло много времени с того, что я задал вопрос и предоставил свой собственный ответ. – stinodes

Я бы установил ваш ответ как принятый, но это не похоже на использование мобильного телефона. – stinodes

Thanx @stinodes :) – mieszko4

Решение, которое я придумал: Так как Animated.event() возвращает функцию, вы можете просто передать свой обработанную gestureState, с ограниченными значениями, в этой функции.
Было бы выглядеть примерно так:

onPanResponderMove: (evt, gestureState) => { 
    let newdx = gestureState.dx, //DO SOMETHING WITH YOUR VALUES 
     newdy = gestureState.dy; 
    Animated.event([null,{ 
     dx: this.state.pan.x, 
     dy: this.state.pan.y 
    }])(evt, {dx: newdx, dy: newdy}); 
},

ли это должно быть сделано, является спорным, хотя.

источник

2016-04-20 14:49:05 stinodes

React Native: Constraining Animated.Value

ответ

Смежные вопросы