基礎組件

React native 不能使用傳統的 HTML 元素標籤，只能使用自行提供的基礎組件來開發畫面

• Text：

  • 用於顯示文件內容

  • 提供多種屬性修改字體樣式

  • iOS 平台可在內嵌入 View 組件

• TextInput：

  • 輸入框組件，<Input>的native版本

  • 可用 onChangeText() 函數，實現對輸入值的監聽。通常綁定在 state

• Image：

  • 圖片展示組件

  • Android 的 ImageView；iOS 的 UIImageView

  • 載入圖片用 source 屬性 ，若是網路可片要加 uri ，本地圖片要用 require()

  • Image 預設的圖片寬和高都是0，要在使用圖片時自行指定寬高，否則圖片無法顯示

  • 組件支持 PSD 的可片格式

  • 預設 Android 不支持 Gif 和 WebP ，要另行在 app/build.gradle 文件中的 dependencies 加入設定

  //放網路圖片
  <Image source={url:'https://...'}>
  </Image>
  //放本地圖片
  <Image source={require('./xxx.jpg')}>
  </Image>

• ActivityIndicator

  • 載入頁面的圓形進度條，用於耗時操作

  • Android 的 ProgressBar；iOS 的 UIProgressView

  render() {
      return (
          <View style={styles.container}>
              <ActivityIndicator 
                  animating={ this.state.animating }
                  color="purple" 
                  size="large"/>
          </View>
      );
  }

• Switch

  • 狀態切換組件

  • 用 value 屬性顯示狀態，onValueChange() 更改狀態

  render() {
      return (
          <View style={styles.container}>
              <Switch 
                  //on的背景顏色
                  onTintColor='blue'
                  //按鈕顏色
                  thumbTintColor='green' 
                  //off的背景顏色
                  tintColor='black' 
                  
                  onValueChange={()=>{
                      this.setState({
                          isOn: !this.state.isOn})
                  }}
                  //用true或flase顯示開關
                  value={this.state.isOn===true}
                  
                  />
  
          </View>
      );
  }