Toast.showShortTop = function (message) {
  showToast(message, "short", "top");
};

Toast.showShortCenter = function (message) {
  showToast(message, "short", "center");
};

Toast.showShortBottom = function (message) {
  showToast(message, "short", "bottom");
};

Toast.showLongTop = function (message) {
  showToast(message, "long", "top");
};

Toast.showLongCenter = function (message) {
  showToast(message, "long", "center");
};

Toast.showLongBottom = function (message) {
  showToast(message, "long", "bottom");
};

Toast.show = function (message) {
  showToast(message, "short", "bottom");
};

Toast.hide = function () {
  RCTToast.hide();
};

安裝和使用方法請查看 官方文檔

動畫庫

之前花時間研究過CSS3的動畫庫，其實目前主流的動畫類型和動畫創意就那麼些，感興趣的可以 clone一下 myAnimate 這個項目。一句話，CSS3裡使用的動畫方案，ReactNative裡也應有盡有。我這邊使用的是 react-native-animatable 組件。使用方式如下：

import * as Animatable from 'react-native-animatable';

class ExampleView extends Component {
  render() {
    return (
       this.setState({fontSize: (this.state.fontSize || 10) + 5 })}>
          Size me up, Scotty
      
    );
  }
}

下面是官方的Demo

調用手機通訊功能

在HybridApp裡實現這個功能還是挺麻煩的，需要客戶端封裝好接口給H5調用，但是在ReactNative裡，一個組件就能搞定—— react-native-communications，安裝請查看官方文檔

這個組件安裝很簡單，支持的功能有：撥號、發短信、發Email、打開網頁 等 ，下面是官方一個綜合的例子：

import React, { Component }  from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

import Communications from 'react-native-communications';

class RNCommunications extends Component({

  render() {
    return (
      
         Communications.phonecall('0123456789', true)}>
          
            Make phonecall
          
        
         Communications.email(['emailAddress1', 'emailAddress2'],null,null,'My Subject','My body text')}>
          
            Send an email
          
        
         Communications.text('0123456789')}>
          
            Send a text/iMessage
          
        
         Communications.web('https://github.com/facebook/react-native')}>
          
            Open react-native repo on Github
          
        
      
    );
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'rgb(253,253,253)',
  },
  holder: {
    flex: 0.25,
    justifyContent: 'center',
  },
  text: {
    fontSize: 32,
  },
});

AppRegistry.registerComponent('RNCommunications', () => RNCommunications);

訪問手機相冊

調取手機相冊和上傳圖片是個老生常談的問題，ReactNative裡可以通過react-native-image-picker 來處理，安裝請查看官方文檔

拎一段代碼片段：

import ImagePicker from 'react-native-image-picker' 

const options = {
    title: '選擇上傳圖片', // specify null or empty string to remove the title
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照...', // specify null or empty string to remove this button
    chooseFromLibraryButtonTitle: '從庫中選擇...', // specify null or empty string to remove this button
    //customButtons: {
    //    'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
    //},
    cameraType: 'back', // 'front' or 'back'
    mediaType: 'photo',
    //videoQuality: 'high', // 'low', 'medium', or 'high'
    maxWidth: 200, // photos only
    maxHeight: 200, // photos only
    allowsEditing: true,
    noData: false,
}

//... 

onUpload() {
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                //console.log('User cancelled image picker');
            }
            else if (response.error) {
                //console.log('ImagePicker Error: ', response.error);
            } else {
                let source = {uri: response.uri.replace('file://', ''), isLocal: true, isStatic: true};
                this.setState({ form: {...this.state.form, avatar: source} })
            }
        })
    }

模態框

模態框在App裡使用的也比較多，比如確認模態、加載模態、輸入模態等，出於良好的用戶體驗和兼容性考慮，我這裡底層采用react-native-modalbox，然後根據不同功能進行二次加工。

ConfirmModal

很常見，不多做介紹，copy下面代碼 直接可以使用

import React, { Component } from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';
import ModalBox from 'react-native-modalbox';
const styles = StyleSheet.create({
    modal: {
        borderRadius: 10,
    },
    modalContent: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    h2: {
        marginTop: 15,
        fontSize: 20,
        color: '#555',
        textAlign: 'center',
    },
    modalOption: {
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#ddd',
    },
    modalCancel: {
        flex: 1,
        padding: 15,
    },
    modalCancelText: {
        fontSize: 16,
        textAlign: 'center',
    },
    modalConfirm: {
        flex: 1,
        padding: 15,
        borderLeftWidth: 1,
        borderLeftColor: '#ddd',
    },
    modalConfirmText: {
        fontSize: 16,
        textAlign: 'center',
    },
    message: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    messageText: {
        color: '#555',
        fontSize: 16,
    },
});
export default class ConfirmModal extends Component {
    constructor(props) {
        super(props);
    }
    open() {
        this.refs.modal.open()
    }
    close() {
        this.refs.modal.close()
    }
    render() {
        let { width } = Dimensions.get('window');
        return (
            
                
                    { this.props.title || '提示' }
                    { this.props.message }
                
                
                     this.refs.modal.close() }>
                        取消
                    
                     this.props.onConfirm() }>
                        確定
                    
                
            
        )
    }
}

LoadingModal

這個也很常見，copy下面代碼 直接可以使用

import React, { Component } from 'react';
import {
    StyleSheet,
} from 'react-native';
import ModalBox from 'react-native-modalbox';
const styles = StyleSheet.create({
    modal: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent'
    },
});

export default class LoadingModal extends Component {
    constructor(props) {
        super(props);
    }
    open() {
        this.refs.modal.open()
    }
    close() {
        this.refs.modal.close()
    }
    render() {
        return (
            
            
        );
    }
}

PickerModal

這個特別講解一下，PickerModal用於頁面上的Picker的處理，顯示效果如下：

import React, { Component } from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    Picker,
    View,
} from 'react-native';
import ModalBox from 'react-native-modalbox'
import dismissKeyboard from '../mixins/dismiss-keyboard'
const styles = StyleSheet.create({
    popup: {
    },
    popupContent: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    h2: {
        marginTop: 15,
        fontSize: 20,
        color: '#555',
        textAlign: 'center',
    },
    popupOption: {
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#ddd',
    },
    popupCancel: {
        flex: 1,
        padding: 15,
    },
    popupCancelText: {
        fontSize: 16,
        textAlign: 'center',
    },
    popupConfirm: {
        flex: 1,
        padding: 15,
        borderLeftWidth: 1,
        borderLeftColor: '#ddd',
    },
    popupConfirmText: {
        fontSize: 16,
        textAlign: 'center',
    },
    message: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    messageText: {
        color: '#555',
        fontSize: 16,
    },
});

export default class PickerModal extends Component {
    constructor(props) {
        super(props);
    }
    open() {
        dismissKeyboard()
        this.refs.modal.open()
    }
    close() {
        this.refs.modal.close()
    }
    _renderPickerItems(data) {
        data.map((item)=>{
            return [
                
            ]
        })
    }
    render() {
        let { width } = Dimensions.get('window');
        return (
            
                
                    
                        {this.props.dataSource.map((item,i)=> {
                            if (item.length) return 
                        })}
                    
                
            
        )
    }
}

補充說明一下dismissKeyboard()這個方法，該方法用於關閉頁面的keyboard(鍵盤)，ReactNative 默認沒有這種方法，需要自己編寫：

import { TextInput } from 'react-native';
const { State: TextInputState } = TextInput;
export default function dismissKeyboard() {
    TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
}

導航條

這個組件其實ReactNative提供了原生版本的，但是樣式和功能上不好控制，建議自己手寫一個，代碼如下：

import React, { Component } from "react";
import {
    Image,
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

const styles = StyleSheet.create({
    leftButton: {
        marginLeft: 5,
    },
    rightButton: {
        marginRight: 5,
    },
    button: {
        width: 44,
        height: 44,
        justifyContent: 'center',
        alignItems: 'center',
    },
    nav: {
        backgroundColor: '#f9f9f9',
        flexDirection: 'row',
        alignItems: 'center',
    },
    title: {
        flex: 1,
        height: 44,
        justifyContent: 'center',
    },
    btnText: {
        fontSize: 16,
        color: '#777',
    },
    marginForIOS: {
        marginTop: 20,
    },
    titleText: {
        fontSize: 20,
        textAlign: 'center',
        color: '#555'
    }
});

export class RightButton extends Component {
    render() {
        return (
            
                { this.props.text ? {this.props.text} : null }
                { this.props.icon ?  : null }
            
        );
    }
}

export class NavigatorBar extends Component {
    _leftButton() {
        if (this.props.navigator.getCurrentRoutes().length > 1) return (
             this.props.navigator.pop() }>
                
            
        )
    }

    _rightButton() {
        if (this.props.rightButton) return (
            
        )
    }

    render() {
        return (
            
                
                    {this._leftButton()}
                
                
                    { this.props.name }
                
                
                    {this._rightButton()}
                
            
        );
    }
}

然後在container裡就可以使用了：

import { NavigatorBar } from '../components/navigator' 

// 沒有右側按鈕 
 

// 右側按鈕為圖標  
{this.props.navigator.push({component: Setting})}, icon: require('../../assets/icon-set.png')}} />

// 右側按鈕為文字 
 this.props.navigator.push({component: OrderHitory}) }} /> 

圖片輪播

建議使用三方的react-native-viewpager組件，安裝請查看 官方文檔

下面是一個demo：

var ViewPager = require('react-native-viewpager');
 {
    // Use the horizontal velocity of the swipe gesture
    // to affect the length of the transition so the faster you swipe
    // the faster the pages will transition
    var velocity = Math.abs(gestureState.vx);
    var baseDuration = 300;
    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;

    return Animated.timing(animatedValue,
    {
      toValue: toValue,
      duration: duration,
      easing: Easing.out(Easing.exp)
    });
  }}
/>