React Native - 动画功能组件

时间:2017-07-07 01:16:12

标签: reactjs react-native

我喜欢React Native动画API,但它与我首选的编写完全无状态功能组件的组件方式有很大冲突。

以此组件为例。如何在不恢复类语法和状态变量来驱动图像样式的情况下使图像动画化?

const Logo = () => (
  <View style={styles.container}>
    <View style={styles.imageContainer}>
      <Animated.Image 
        resizeMode='contain'
        style={styles.image}
        source={require(img/sample.png')}
      />
    </View>
  </View>
)

export default Logo

2 个答案:

答案 0 :(得分:6)

您可以使用商店来保留动画值。但IMO这是个坏主意。只需使用课程。你应该更灵活;)

作为替代方案,您可以使用声明性语法尝试https://github.com/oblador/react-native-animatable。我之前没有使用它,但看起来它可以提供帮助。

更新:使用React Native 0.59及更高版本,您可以在功能组件中使用挂钩。

答案 1 :(得分:0)

正如遥远的人所述,您可以使用react钩子。 它们在React 16.8中引入,并在0.59版本中添加到React Native中。

您将不得不使用useStateuseEffect

const AnimatedComponent = (props)=>{

    // Need to create state first. Setter is not used in this case
    const [value] = useState(new Animated.Value(pros.value))

    useEffect(()=>{
        Animated.timing(value, {
            toValue: props.value,
            duration: 100,
        }).start() // < Don't forget to start!
    }, [props.value]) // < Run animation only when props.value changed

    // Apply animated property to your style
    return (
        <Animated.View style={{width: value}} />
    )
}

例如,这就是我实现进度条的方式:

const ProgressBar = (props)=>{

    const [value] = useState(new Animated.Value(props.value))

    useEffect(()=>{
        Animated.timing(value, {
            toValue: props.value,
            duration: 100,
        }).start()
    }, [props.value])

    const width = value.interpolate({
        inputRange: [0, 100],
        outputRange: ['0%', '100%'],
    })

    return (
        <View style={{
            width: '100%',
            height: '100%',
            flexDirection: 'row',
            backgroundColor: 'white',
        }}>
            <Animated.View style={{
                width: width,
                height: '100%',
                backgroundColor: 'green',
            }}></Animated.View>
        </View>
    )
}