react-native - 在本机反应中创建一个微调器

Question

您好，我正在尝试使用 Animatable 制作一个旋转轮以响应本机。按照此处的示例（https://code.tutsplus.com/tutorials/practical-animations-in-react-native--cms-27567），我能够旋转一个矩形框。这是代码！

  <Animatable.View
                        ref={animation[0]}
                        style={[styles.box, { backgroundColor: animation[1] }]}
                        animation={animation[0]}
                        iterationCount={"infinite"}>
                        <Text style={styles.box_text}>{animation[0]}</Text>
 </Animatable.View>


const styles = StyleSheet.create({
        container: {
            flex: 1,
            flexDirection: 'column',
            padding: 20
        },
        row: {
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
        },
        box: {
            alignItems: 'center',
            justifyContent: 'center',
            height: 100,
            width: 100,
            backgroundColor: '#ccc'
        },
        box_text: {
            color: '#FFF'
        }
    });

但问题在这里，我们正在旋转一个使用 css 创建的盒子，有没有一种方法可以让我使用 html 和 css 制作自己的微调器并根据业务规则旋转和停止它？

需要一些指导和建议谢谢！

Answer 1

您可以将https://www.npmjs.com/package/react-native-wheel-of-fortune npm 包用于您的目的。