当屏幕以本机模式加载时，如何在Button上显示动画？

Question

当屏幕以本机模式加载时，如何在Button上显示动画？

我想在Button上应用动画并在加载到screen时显示它的效果。所以请帮助我。我如何在react-native中实现此功能。

Answer 1

使用此spinner button库并根据api响应更改您的标志。

Answer 2

使用react-native-animatable和react-native-button可以在按钮上实现动画，简单表达之一如下

<View style={styles.container}>
     <Button onPress={this.onPress}>
          <Animatable.Text 
               animation="pulse"
               easing="ease-out" 
               iterationCount="infinite" 
               style={{ textAlign: 'center', fontSize: 100 }}>
                  OK
         </Animatable.Text>
      </Button>
 </View>

您可以设置isLoading的状态，并在加载完成时将迭代计数设置为0

Answer 3

<View style={styles.container}>
     <Button onPress={this.onPress}>
{this.state.isLoading ? 
<React.Fragment>
          <Text style={{ textAlign: 'center', fontSize: 100 }}>
                  Loading ...
         </Text>


<ActivityIndicator/>

</React.Fragment> : <Text>Press me <Text>
      </Button>
 </View>

Answer 4

您可以使用这一解决方案来实现您的功能。

https://github.com/rcaferati/react-native-really-awesome-button