React Native Animation字体大小输入不起作用答案

【问题标题】：React Native Animation font size input doesn't workReact Native Animation字体大小输入不起作用
【发布时间】：2020-11-28 09:25:34
【问题描述】：

你好 React 开发者，我的问题：

我只想通过在我的 TextInput 中使用 onFocus 来点击占位符的字体大小来制作动画。

使用 expo 并在状态 InputsMarginTop:0 中创建一切正常，但使用 inputsFontSize: new Animated.Value(22) 我的博览会正在崩溃。为什么它不起作用？

    import React, { Component } from 'react'
    import { StyleSheet, Text, View, ImageBackground, TextInput, Animated } from 'react-native'
        export default class AnimatedLoginScreen extends Component {
        state = {
            blur: 2,
            alfpha: 0.2,
            theme: 'dark',
            InputsMarginTop: new Animated.Value(11),
            inputsFontSize: new Animated.Value(22)
        }
handleFocus = () => {
        Animated.timing(this.state.InputsMarginTop, {
            toValue: 55,
            duration: 1000
        }).start()
    }

    render() {
        const blackOrWhite = this.state.theme === "dark" ? "white" : "white"
        const { inputsFontSize } = this.state


        return (


            <ImageBackground style={styles.bg} source={require('../assets/mountains.jpg')}>
                <View style={[styles.container,
                { backgroundColor: this.state.theme === 'dark' ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.3)" }
                ]}>


                    <View style={styles.headContainer}>
                        <Text style={styles.text}>Sing In</Text>
                        <Text style={{ fontSize: 22, marginTop: 5 }}>/UP</Text>
                    </View>

                    <Animated.View style={[styles.inputContainer, { marginTop: this.state.InputsMarginTop }]}>
                        <TextInput
                            style={[styles.input, { fontSize: inputsFontSize, borderBottomWidth: 2, borderColor: blackOrWhite }]}
                            placeholder="Username"
                            placeholderTextColor={blackOrWhite}
                            onFocus={() => { this.handleFocus() }}
                        />
                      
                    </Animated.View>


                </View>

            </ImageBackground>


        )
    }

}

感谢您的回答:)

【问题讨论】：

expo 显示什么错误？
没什么，只是把我扔到我手机的桌面屏幕上。例如，当我在 StyleSheet 中声明时也会发生这种情况：宽度为字符串/宽度：'33' 而不是宽度：{33}

标签： reactjs react-native react-animated

【解决方案1】：

发生这种情况是因为您的动画值 inputsFontSize 在非动画组件 (TextInput) 下传递，并且对于 InputsMarginTop 工作正常，因为您在动画组件 (Animated .查看）

【讨论】：

【解决方案2】：

在导入后写下这一行：

Animated.TextInput = Animated.createAnimatedComponent(TextInput);

然后用Animated.TextInput代替TextInput

【讨论】：