React Native 控件封裝

由於Android 與IOS 界面的差異，對一些控件進行了封裝：SearchBar,Segment,Modal,TextInput，實現Android 與IOS 界面 統一。

1、SearchBar的封裝

import React, {Component} from 'react';
import {View, TouchableOpacity, Dimensions, TextInput} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import {px2dp} from 'js/utils/commonUtils';
const deviceWidth = Dimensions.get('window').width;
import colors from 'js/themes/colors';


/**
 *  SearchBar
 *  created by yang on 2017/10/16
 */
export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  static propTypes = {
    editable:React.PropTypes.bool,//輸入框是否可編輯
    keyboardType:React.PropTypes.any,//輸入框彈出鍵盤類型

    /********文字****************/
    placeholderText:React.PropTypes.any,//輸入框佔位字符


    /********字體****************/
    placeHolderTextFontColor: React.PropTypes.any,//輸入框佔位字體顏色
    textInputMaxSize: React.PropTypes.number,//輸入框最大字數
    textInputFontSize:React.PropTypes.number,//輸入框字體大小
    textInputFontColor:React.PropTypes.any,//輸入框字體顏色


    /********樣式****************/
    textInputViewHeight: React.PropTypes.number,//輸入框背景高度
    textInputViewWidth: React.PropTypes.number,//輸入框背景寬度
    textInputViewBackGroundColor: React.PropTypes.any,//輸入框背景顏色

    /********回調****************/
    onChangeTextCallBack: React.PropTypes.func,//輸入框字體變化的指令
    onChangeCallBack: React.PropTypes.func,//輸入框onChange的指令
    onFocusCallBack: React.PropTypes.func,//輸入框onFocus的指令
    onBlurCallBack: React.PropTypes.func,//輸入框onBlur的指令
    onSearchPressedCallBack:React.PropTypes.func,//點擊搜索圖標時的指定

  };

  render() {
    return (
      <View style={styles.containers}>
        <View style = {{...styles.textInputViewStyle,
                          height: this.props.textInputViewHeight ? this.props.textInputViewHeight:32,
                          width:this.props.textInputViewWidth? this.props.textInputViewWidth:deviceWidth-55,
                          backgroundColor:this.props.textInputViewBackGroundColor? this.props.textInputViewBackGroundColor : colors.colorEC}}>
          <Icon name="ios-search"  size={px2dp(24)}  color={colors.arrowColor} />
          <TextInput underlineColorAndroid="transparent"
                     style={{...styles.textInputStyle,
                       fontSize: this.props.textInputFontSize?this.props.textInputFontSize:13,
                       color:this.props.textInputFontColor?this.props.textInputFontColor:colors.textTitle,}}
                     keyboardType={this.props.keyboardType?this.props.keyboardType:"default"}
                     placeholder= {this.props.placeholderText? this.props.placeholderText:"關鍵字"}
                     maxLength = {this.props.textInputMaxSize? this.props.textInputMaxSize:15}
                     placeholderTextColor={this.props.placeHolderTextFontColor? this.props.placeHolderTextFontColor :colors.placeHolderTextColor}
                     onChangeText={this.props.onChangeTextCallBack}
                     onChange={this.props.onChangeCallBack}
                     onFocus={this.props.onFocusCallBack}
                     onBlur={this.props.onBlurCallBack}
                     editable={this.props.editable===false?this.props.editable:true}>
          </TextInput>
        </View>
        <TouchableOpacity  onPress={this.props.onSearchPressedCallBack.bind(this)}>
          <View style = {{...styles.searchIconViewStyle,
                          height:this.props.textInputViewHeight ? this.props.textInputViewHeight:32}}>
            <Icon name="ios-search" size={px2dp(24)}  color={colors.appGreen}/>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
  }

const styles =
  {
   containers:{
     flexDirection: 'row',
     display: 'flex',
     width:'100%',
     justifyContent:'space-between',
     backgroundColor:colors.white,
     paddingLeft:10,
     paddingRight:15,
     paddingTop:10,
     paddingBottom:10,

   },
    textInputViewStyle:{
      flexDirection: 'row',
      display: 'flex',
      alignItems:'center',
      borderRadius:10,
      paddingLeft:10,
      paddingRight:10,
      marginRight:2
    },
    textInputStyle:{
      flex: 1,
      paddingVertical: 0,
      marginLeft:3,
      paddingHorizontal: 10,
    },
    searchIconViewStyle:{
     flexDirection: 'row',
      display: 'flex',
      alignItems:'center',
    }


  };

2、segment 的封裝:

import React, {Component} from 'react';
import {TouchableOpacity,SegmentedControlIOS,  Platform,Image} from 'react-native';
import { SegmentedControl } from 'antd-mobile';

/**
 * segment used on Android & ios
 * Created by yang on 2017/10/17.
 */

export default class SegmentedControlBoth extends Component {

  render(){
    return Platform.OS === 'ios'?(
      <SegmentedControlIOS {...this.props}>{this.props.children}</SegmentedControlIOS>
    ):(
      <SegmentedControl {...this.props}>{this.props.children}</SegmentedControl>
    )
  }
}

3、帶輸入框的Modal 封裝

import React from 'react';
import {Text, View, Modal, Image, Dimensions, TouchableOpacity, TextInput} from 'react-native';

const {height, width} = Dimensions.get('window');
import colors from 'js/themes/colors';

/**
 *  custom TextInputModal.js
 *  contains Title, Des, TextInput, cancel ,confirm
 *  created by yang on 2017/09/27
 */
export default class TextInputModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  static propTypes = {
    ModalVisible: React.PropTypes.bool,//是否顯示對話框
    TitleVisible: React.PropTypes.bool,//是否顯示標題
    TextInputVisible: React.PropTypes.bool,//是否顯示輸入框
    DescriptionVisible: React.PropTypes.bool,//是否顯示描述


    /********寬高、距離****************/
    HeightModal: React.PropTypes.any,//這個彈窗的高度
    WidthModal: React.PropTypes.any,//這個彈窗的寬度
    TitleHeight: React.PropTypes.any,//這個彈窗的標題高度
    TitleWidth: React.PropTypes.any,//這個彈窗的標題寬度
    DescriptionHeight: React.PropTypes.any,//這個彈窗的標題高度
    DescriptionWidth: React.PropTypes.any,//這個彈窗的標題寬度
    BottomHeight: React.PropTypes.any,//這個彈窗的底部高度
    BottomWidth: React.PropTypes.any,//這個彈窗的底部寬度
    TextInputHeight: React.PropTypes.any,//這個彈窗的輸入框高度
    TextInputWidth: React.PropTypes.any,//這個彈窗的輸入框寬度
    TextInputMarginBottom: React.PropTypes.any,//輸入框與底部的距離
    TitleMarginTop: React.PropTypes.any,//標題頂部距離
    TitleMarginBottom: React.PropTypes.any,//標題底部距離
    DescriptionMarginBottom: React.PropTypes.any,//描述底部距離


    /********字體****************/
    TitleFontSize: React.PropTypes.number,//標題的文字大小
    TitleFontColor: React.PropTypes.any,//標題的文字顏色
    DescriptionFontSize: React.PropTypes.number,//描述的文字大小
    DescriptionFontColor: React.PropTypes.any,//描述的文字顏色
    BottomFontSize: React.PropTypes.number,//下面取消確定的文字大小
    BottomFontColor: React.PropTypes.any,//下面取消確定的文字的顏色
    TextInputFontSize: React.PropTypes.number,//輸入框字體大小
    TextInputFontColor: React.PropTypes.any,//輸入框字體顏色
    TextInputPlaceHolderTextFontColor: React.PropTypes.any,//輸入框佔位字體顏色
    TextInputMaxLength: React.PropTypes.number,//輸入框字體長度限制


    /********文字****************/
    TitleText: React.PropTypes.any,//標題文字
    DescriptionText: React.PropTypes.any,//描述文字
    CancelText: React.PropTypes.any,//取消文字
    OkText: React.PropTypes.any,//確定文字
    TextInputPlaceHolderText: React.PropTypes.any,//輸入框佔位內容
    TextInputDefaultText: React.PropTypes.any,//輸入框默認內容


    /********回調****************/
    onChangeTextCallBack: React.PropTypes.func,//輸入框字體變化的指令
    confirmCallBack: React.PropTypes.func,//回調確定的指令
    cancelCallBack: React.PropTypes.func,//回調取消的指令


  }


  render() {
    return (
      <View>
        <Modal
          animationType={"fade"}
          transparent={true}
          visible={this.props.ModalVisible}
          onRequestClose={this.props.cancelCallBack.bind(this)}
        >
          <TouchableOpacity
            style={styles.ViewPage} onPress={() => {
          }}>

            <View style={styles.ViewPage}>
              <View style={{
                height: this.props.HeightModal ? this.props.HeightModal : 200,
                width: this.props.WidthModal ? this.props.WidthModal : 303,
                backgroundColor: 'white',
                borderRadius: 8
              }}>
                {this.props.TitleVisible && <View style={{     /****title******/
                  height: this.props.TitleHeight ? this.props.TitleHeight : 44,
                  width: this.props.TitleWidth ? this.props.TitleWidth : 303,
                  alignItems: 'center',
                  justifyContent: 'center'
                }}>
                  <Text style={{
                    fontSize: this.props.TitleFontSize ? this.props.TitleFontSize : 16,
                    color: this.props.TitleFontColor ? this.props.TitleFontColor : colors.textTitle,
                    marginTop: this.props.TitleMarginTop ? this.props.TitleMarginTop : 18,
                    marginBottom: this.props.TitleMarginBottom ? this.props.TitleMarginBottom : 10
                  }}>{this.props.TitleText}</Text>
                </View>}

                {this.props.DescriptionVisible && <View style={{   /**** Description ******/
                  height: this.props.DescriptionHeight, width: this.props.DescriptionWidth,
                  alignItems: 'center', justifyContent: 'center'
                }}>
                  <Text style={{
                    fontSize: this.props.DescriptionFontSize ? this.props.DescriptionFontSize : 14,
                    color: this.props.DescriptionFontColor ? this.props.DescriptionFontColor : colors.textTitle,
                    marginBottom: this.props.DescriptionMarginBottom ? this.props.DescriptionMarginBottom : 10
                  }}>{this.props.DescriptionText}</Text>
                </View>}



                {this.props.TextInputVisible && <TextInput style={{ /*****輸入框******/
                    flex: 1,
                    padding: 10,
                    borderRadius: 10,
                    justifyContent: 'center',
                    alignItems:'center',
                    alignSelf:'center',
                    borderWidth: 1,
                    borderColor: colors.dividerLineColor,
                    height: this.props.TextInputHeight ? this.props.TextInputHeight : 80,
                    width: this.props.TextInputWidth ? this.props.TextInputWidth : 250,
                    marginBottom: this.props.TextInputMarginBottom ? this.props.TextInputMarginBottom : 10,
                    fontSize: this.props.TextInputFontSize ? this.props.TextInputFontSize : 13,
                    color: this.props.TextInputFontColor ? this.props.TextInputFontColor : colors.textTitle,
                  }}
                  underlineColorAndroid="transparent"
                  placeholder={this.props.TextInputPlaceHolderText}
                  placeholderTextColor={this.props.TextInputPlaceHolderTextFontColor ? this.props.TextInputPlaceHolderTextFontColor : colors.placeHolderTextColor}
                  multiline={true}
                  maxLength={this.props.TextInputMaxLength}
                  onChangeText={this.props.onChangeTextCallBack? this.props.onChangeTextCallBack.bind(this):''}>{this.props.TextInputDefaultText}</TextInput>}



                <View style={{  /***取消確定**/
                  height: this.props.BottomHeight ? this.props.BottomHeight : 47,
                  width: this.props.BottomWidth ? this.props.BottomWidth : 303,
                  flexDirection: 'row',
                  borderTopWidth: 1,
                  borderColor: colors.dividerLineColor
                }}>
                  <TouchableOpacity style={{flex: 1}} onPress={this.props.cancelCallBack.bind(this)}
                  >
                    <View style={{
                      flex: 1,
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRightWidth: 1,
                      borderColor: colors.dividerLineColor
                    }}>
                      <Text style={{
                        fontSize: this.props.BottomFontSize ? this.props.BottomFontSize : 14
                        , color: this.props.BottomFontColor ? this.props.BottomFontColor : colors.colorNine
                      }}>{this.props.CancelText ? this.props.CancelText : '取消'}</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={{flex: 1}}
                                    onPress={
                                      this.props.confirmCallBack.bind(this)
                                    }>
                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                      <Text style={{
                        fontSize: this.props.BottomFontSize ? this.props.BottomFontSize : 14
                        , color: this.props.BottomFontColor ? this.props.BottomFontColor : colors.blue
                      }}>{this.props.OkText ? this.props.OkText : '確定'}</Text>
                    </View>
                  </TouchableOpacity>
                </View>


              </View>
            </View>
          </TouchableOpacity>
        </Modal>


      </View>);
  }
}


const styles =
  {
    ViewPage: {
      flex: 1,
      width: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'rgba(0,0,0,0.2)'
    }
  };

轉載請標明引用連接 http://blog.csdn.net/xiaoduo0987/article/details/78266557，謝謝