Реагируй на родной реанимированный - меняй параметры анимации с помощью реквизита

Question

Я использую реагировать родной реанимирован. Я не могу изменить значение анимации, передавая различные реквизиты для компонента. Это мой выставочный код: выставочный код

На самом деле я хочу изменить переменную min внутри моих snappable.js компонентов на props.minValue, чтобы я мог динамически изменять анимацию.

const min = props.minDist ? props.minDist : 0

В первый раз компонент получает реквизит, но после того, как он больше не меняется.

Вот как я передаю реквизит компоненту Snappable.

<View style={styles.container}>
    <Snappable minValue={this.state.min}/>
    <TouchableOpacity
    style={styles.touch}
    onPress={() => this.setState({min: 0})}>
    <Text>Change Props</Text>
  </TouchableOpacity>
</View>

Заранее спасибо .

Answer 1

Это кажется немного повсюду. Во-первых, вы неправильно устанавливаете свое состояние. Вы используете компонент на основе функций, но пытаетесь использовать this.setState(). Этот метод существует в функциональном компоненте. Если вы хотите использовать состояние в функциональном компоненте, вам нужно использовать хук useState.

Во-вторых, похоже, что вы ничего не делаете с опорой minValue в своем компоненте Snappable , Вы передаете minValue реквизит в компонент, но не используете его.

Редактировать (пример добавления хуков):

Вы можете установить свое состояние с крючками вот так:

export default function App() {
    const [min, setMin] = React.useState(200)

    return (
        <View style={styles.container}>
        <Snappable minValue={min} />
        <TouchableOpacity
            style={styles.touch}
            onPress={() => setMin(0)}>
            <Text>Change Props</Text>
        </TouchableOpacity>
        </View>
    );
}