React Native常用第三方庫

前言

React Native出來一年多了，受到各大開發人員的喜愛，但是由於隻是專注於View層的開發，因此在很多深層次上還需要結合原生app做一定的兼容，還有就是現在好多控件，如Android中已是係統的控件的sidemenu、checkbox、gridview等，這些在react native中係統是沒有給我們提供的，這時候就借助了第三方開源的力量。
那麼我們今天說說在React Native項目開發中常見的一些第三方庫。

常見的第三方庫

組件篇

CheckBox（多選按鈕）

react-native-check-box CheckBox
基本用法：

 <CheckBox
     style=
     onClick={()=>this.onClick(data)}
     isChecked={data.checked}
     leftText={leftText} />;

當然我們也可以自定義樣式，主要是對選中和未選中的樣式做修改：

renderCheckBox(data) {
    var leftText = data.name;
    return (
        <CheckBox
            style=
            onClick={()=>this.onClick(data)}
            isChecked={data.checked}
            leftText={leftText}
            checkedImage={<Image source={require('../../page/my/img/ic_check_box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
            unCheckedImage={<Image source={require('../../page/my/img/ic_check_box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
        />);
}

RadioButton（單選按鈕）

react-native-flexi-radio-button
使用也很簡單，就是在中嵌套下就行：

 <RadioGroup
                   onSelect = {(index, value) => this.onSelect(index, value)}
                >
                     <RadioButton value={'item1'} >
                         <Text>This is item #1</Text>
                     </RadioButton>

                    <RadioButton value={'item2'}>
                         <Text>This is item #2</Text>
                     </RadioButton>

                     <RadioButton value={'item3'}>
                         <Text>This is item #3</Text>
                    </RadioButton>
                </RadioGroup>

sidemenu （側滑欄）

react-native-side-menu
使用：

<SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>

splashscreen

react-native-splash-screen
使用也很簡單，就是添加一個閃屏的xml

imagepicker

這個組件幫助我們選取圖片和調用相機等，這個組件同時支持photo和video，也就是照片和視頻都可以用這個組件實現。
用法：

 import ImagePickerManager from ‘NativeModules‘;

var options = {
  title: ‘Select Avatar‘, // 選擇器的標題，可以設置為空來不顯示標題
  cancelButtonTitle: ‘Cancel‘,
  takePhotoButtonTitle: ‘Take Photo...‘, // 調取攝像頭的按鈕，可以設置為空使用戶不可選擇拍照
  chooseFromLibraryButtonTitle: ‘Choose from Library...‘, // 調取相冊的按鈕，可以設置為空使用戶不可選擇相冊照片
  customButtons: {
    ‘Choose Photo from Facebook‘: ‘fb‘, // [按鈕文字] : [當選擇這個按鈕時返回的字符串]
  },
  mediaType: ‘photo‘, // ‘photo‘ or ‘video‘
  videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘
  durationLimit: 10, // video recording max time in seconds
  maxWidth: 100, // photos only默認為手機屏幕的寬，高與寬一樣，為正方形照片
  maxHeight: 100, // photos only
  allowsEditing: false, // 當用戶選擇過照片之後是否允許再次編輯圖片
};

ImagePickerManager.showImagePicker(options, (response) => {
  console.log(‘Response = ‘, response);

  if (response.didCancel) {
    console.log(‘User cancelled image picker‘);
  }
  else if (response.error) {
    console.log(‘ImagePickerManager Error: ‘, response.error);
  }
  else if (response.customButton) {
    // 這是當用戶選擇customButtons自定義的按鈕時，才執行
    console.log(‘User tapped custom button: ‘, response.customButton);
  }
  else {
    // You can display the image using either data:

    if (Platform.OS === ‘android‘) {
        source = {uri: response.uri, isStatic: true};
    } else {
        source = {
            uri: response.uri.replace(‘file://‘, ‘‘),
            isStatic: true
        };
    }

    this.setState({
      avatarSource: source
    });
  }
});

然後在頁麵展示的時候：

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

說到這裏，我們要說一下另一個控件picker

picker-Android

Picker就是ReactNative界的Spinner,其常用的屬性有：

onValueChange 這個方法在方法在選擇Picker某一項時調用可傳兩個參數選擇的value和position
selectedValue 這個屬性是選擇的值
enabled 設置是否可點擊 Android屬性
mode 設置樣式 Android屬性 dropdown下拉樣式和dialog彈窗樣式默認是dialog
prompt 設置Picker標題 Android屬性並且隻有是mode為dialog才會顯示
itemStyle 設置每一項的樣式 iOS屬性

用法：

/**
 * Created by Administrator on 2016/9/7.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    Picker,

} from 'react-native';

class PickerG extends Component {

    constructor(porp) {
        super(porp);
        this.state= {
            selectedValue: ''
        }
    }


    render() {
        return (
            <Picker
                //Picker樣式 dialog彈窗樣式默認  dropdown顯示在下邊
                // mode = {'dropdown'}
                //顯示選擇內容
                selectedValue={this.state.selectedValue}
                //選擇內容時調用此方法
                onValueChange={(value)=>this.setState({selectedValue: value})}
                //設置Title 當設置為dialog時有用
                prompt={'請選擇'}
            >
                <Picker.Item label='Android' value='android'/>
                <Picker.Item label='IOS' value='ios'/>
                <Picker.Item label='ReactNative' value='reactnative'/>
            </Picker>
        )
    }
}

module.exports = PickerG;

easy-toast

react-native-easy-toast
這個組件兼容了Android和iOS的toast,使用也很簡單。
用法：

render() {
         return (
             <View style={styles.container}>
                 ...
                 <Toast ref="toast"/>
             </View>
         );
 }

最後在需要調用的地方：