React Native中加載指示器組件ActivityIndicator使用方法

這裡講一下React Native中的一個組件——ActivityIndicator，這是一個加載指示器，俗稱菊花，很常見的，效果如下所示：

vc281tDT0MG9uPa809TY1rjKvsb3o6zSu7Tz0rvQoaOs1eLKx7PftOeyu8rHztLJ6NbDtcSjrNXiuPbX6bz+sb7J7b7N09DSu7j2yvTQ1MrHyejWw8bktPPQobXEo6zBvbj20aHP7qOs0ru089K70KGho9XiwO/Ls7Hjvs296cnc0rvQqbjD1+m8/rXEyvTQ1KO6PC9wPg0KYW5pbWF0aW5no7rV4rj2ss7K/b3TytyyvLb70M21xNa1o6yx7cq+yse38c/Uyr6809TY1rjKvsb3oaMgY29sb3KjunN0cmluZ9DNss7K/aOs08PAtMno1sPWuMq+xve1xNHVyaujrMSsyM/Kx7vSyau1xKOsztLDx9K7sOPSsrK7udzL+6GjIGhpZGVzV2hlblN0b3BwZWSjqL32aU9Tv8nTw6Opo7rU2sO709C2r7uttcTKsbryo6zKx7fx0qrS/rLY1rjKvsb3o6jErMjPzqp0cnVlo6mhoyBzaXplo7rV4r7NysfJ6NbDs9+057XEo6y+zcG9uPbRoc/uo6xzbWFsbLrNbGFyZ2WjrNK70KHSu7TzoaMNCjxwPsTcyejWw7XEvs3V4ry4uPayzsr9o6y908/CwLTO0sPHv7S/tNXiuPbA/dfToaPA/dfT1tDT0NK7uPawtMWlo6y/2NbGwcvWuMq+xve1xM/Uyr66zdL+stiho7C0xaXO0sPH08NUb3VjaGFibGVPcGFjaXR51+m8/sC0yrXP1qOs1eK49tfpvP6/ydLUzO2809K7uPbP7NOmt723qKOsz8LD5s7Sw8e3xdK70KHSu7Tzwb249ta4yr7G96OstPrC68jnz8KjujwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ActivityIndicator, TouchableOpacity } from 'react-native'; class RNActivityIndicatorDemo extends Component { constructor(props) { super(props); this.state = {// 初始設為顯示加載動畫 animating: true, }; } // 按鈕響應方法，切換顯示與隱藏 showOrHide() { if (this.state.animating) { this.setState({ animating: false }); } else { this.setState({ animating: true }); } } render() { return ( {/* 切換顯示或隱藏的按鈕 */} 顯示/隱藏 {/* 小號的指示器 */} {/* 大號的指示器 */} ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, centering: { alignItems: 'center', justifyContent: 'center', padding: 8, }, btn:{ marginTop:10, width:150, height:35, backgroundColor:'#3BC1FF', justifyContent:'center', alignItems:'center', borderRadius:4, }, }); AppRegistry.registerComponent('RNActivityIndicatorDemo', () => RNActivityIndicatorDemo);

看代碼，我們首先就在state中加了一個變量animating，用來控制指示器的顯示與隱藏，初始是顯示的。然後看我們的界面元素部分，即render中的部分，除了最外面一層view外，最上面就是一個TouchableOpacity，onPress屬性指向了一個響應方法，即showOrHide方法，在這個方法中我們可以看到，很簡單地實現了一個通過animating變量切換顯示與隱藏的功能。因此下面的ActivityIndicator元素中我們的animating屬性是用state中的animating變量來控制的，其余的屬性我們基本是默認的，size一小一大，很簡單的例子。

這裡可以下載我的示例工程：https://github.com/Cloudox/RNActivityIndicatorDemo