小例子，顯示和隱藏圓形進度條，涉及到的屬性：
animating： 預設為顯示 true
color：預設有顏色
size：預設為 small ，可選 large ，android裝置上可直接填數字
hidesWhenStopped：當animating和hidesWhenStopped都為fales時，顯示進度條靜止的狀態。

程式碼

export default class App extends Component{

  constructor(props){
      super(props);
      this.state ={
        isShow:true
      }
  }

  onPressTop(){
      this.setState({
          isShow:true
      })
  }
    onPressBoot(){
        this.setState({
            isShow:false
        })
    }
  render() {
    return (
      <View style={styles.container}>
          <ActivityIndicator size={100} animating={this.state.isShow}
          color="#0000ff"></ActivityIndicator>

          <Button title="顯示"
                  onPress={this.onPressTop()}
          />

          <Button title="隱藏"
                  onPress={this.onPressBoot()}
          />

      </View>
    );
  }
}
 

這樣寫會出現以下問題

當元件在componentWillUpdate或componentDidUpdate內重複呼叫setState時，可能會發生死迴圈。
當render函式渲染介面時，又重新呼叫了setState。setState就會重新渲染介面，所以發生錯誤。
正確方法，bind；

 onPress(state){
        this.setState({
            isShow:state
        })
    }
...
		 <Button title="顯示"
                  onPress={this.onPress.bind(this,true)}
          />

          <Button title="隱藏"
                  onPress={this.onPress.bind(this,false)}
          />

 

bind就是將處理函式和指定的操作繫結在一起。操作觸發時函式執行。
也可以直接用箭頭函式

		  <Button title="顯示"
                  onPress={() => this.setState({
                      isShow:true
                  })}
          />

          <Button title="隱藏"
                  onPress={() => this.setState({
                      isShow:false
                  })}
          />
 

箭頭函式也可以直接完成bind繫結，它會綁定當前scope的this引用。這個只是ES6的寫法。