reactnative picker下拉框组件,有没有完整的案例参考?



  • 本人是新手,现在遇到的问题是:
    1、picker组件无法fixed到屏幕的最下面
    2、点击后遮罩层、picker两个的动画显示隐藏如何编写



  • 就没有人解答下吗?



  • 我有写过,但是怎么给你?



  • /**

    • Created by liaoqijin on 17/3/27.
      */
      'use strict';

    import React from 'react';
    import {
    Image,
    View,
    Text,
    StyleSheet,
    Platform,
    TouchableOpacity,
    InteractionManager,
    Modal,
    Picker,
    Animated
    } from 'react-native';

    import * as Header from '../../common/Header.js';

    //let channelArr = [{name:'德国贝朗'},{name:'家装(1)'},{name:'海鸥'},{name:'犇牛'},{name:'好家伙'}];
    //let dealerArr = [{name:'德国贝朗门店'},{name:'家装(1)门店'},{name:'海鸥门店'},{name:'犇牛门店'},{name:'好家伙门店'}];

    export class ProductDetailAddShopCarOrOrderView extends React.Component {
    constructor(props){
    super(props);
    this.state = {
    modalVisible: false,
    //productSum:1,
    isFinishEdit:false,
    dealerName:'',
    shopName:'',
    isRefreshShopData:false,
    bottomViewH:new Animated.Value(0),
    fadeAnim:new Animated.Value(0),
    pointerEvents:'none',
    //fadeAnim:0
    }
    }

    /*

    • componentWillReceiveProps(nextProps):props改变(父容器来更改或是redux),

    • 将会调用该函数。新的props将会作为参数传递进来,

    • 老的props可以根据this.props来获取。

    • 我们可以在该函数中对state作一些处理。

    • 注意:在该函数中更新state不会引起二次渲染。

    • */
      componentWillReceiveProps(nextProps){
      if(this.state.dealerName === '' && nextProps.dealerArr.length){
      var dealerData = nextProps.dealerArr[0];
      this.setState({
      dealerName:dealerData.distributorName
      });
      this.props.dealerDidSelectBlock(dealerData);
      }

      if((this.state.shopName === '' && nextProps.shopArr.length) || this.state.isRefreshShopData){
      var shopData = nextProps.shopArr[0];
      this.setState({
      shopName:shopData.bspShopName
      });
      this.props.shopDidSelectBlock(shopData);
      this.setState({
      isRefreshShopData:false
      });
      }
      }

    render(){
    const {channelId, dealerArr} = this.props;
    const { subtractSumBlock, addSumBlock, type, product, packageDetail } = this.props;
    var productName;
    var price = 0;
    if(type == 'product'){
    productName = product ? product.productName:'';
    price = product?product.brandPrice:0;
    }else if(type == 'packageProduct'){
    var isSame = false;
    if(packageDetail){
    productName = packageDetail ? packageDetail.promotionName:'';
    //这里判断渠道经销商是否相同来显示不同价格
    if(dealerArr && dealerArr.length > 0){
    for(var i = 0;i < dealerArr.length;i ++){
    var dealerData = dealerArr[i];
    console.log('住',packageDetail);
    if(dealerData.distributorId == packageDetail.distributorId
    && channelId == packageDetail.channelId){
    isSame = true;
    }
    }
    }
    console.log(typeof packageDetail.salesPromotionLines);
    if(packageDetail.salesPromotionLines){
    if(isSame && packageDetail.salesPromotionLines){
    console.log(dealerArr,packageDetail,packageDetail.salesPromotionLines[0].quantity);
    for(var i = 0;i < packageDetail.salesPromotionLines.length;i ++){
    price += parseInt(packageDetail.salesPromotionLines[i].price) * parseInt(packageDetail.salesPromotionLines[i].quantity);
    console.log('滴滴滴滴',price);
    }
    }else{
    for(var i = 0;i < packageDetail.salesPromotionLines.length;i ++){
    price += parseInt(packageDetail.salesPromotionLines[i].brandPrice) * parseInt(packageDetail.salesPromotionLines[i].quantity);
    }
    }
    }
    }
    }

    return(
      <Animated.View style={[styles.container,{opacity: this.state.fadeAnim}]}
                     pointerEvents={this.state.pointerEvents}
            onPress={()=>{this.hideModal()}}
      >
        <TouchableOpacity activeOpacity={1} onPress={()=>{this.hideModal()}}>
        <Animated.View  style={[styles.bottomViewBgStyle,{opacity: this.state.fadeAnim}]} ref="bottomBgView"
                        pointerEvents={this.state.pointerEvents}
        >
          <TouchableOpacity activeOpacity={1}>
            <Animated.View style={[styles.bottomViewStyle,{height:this.state.bottomViewH}]} ref="bottomView">
              {/*产品信息*/}
              <View style={styles.productInfoViewStyle}>
                <View style={styles.productInfoUpViewStyle}>
                  <Text numberOfLines={2} style={styles.productNameTextStyle}>{productName}</Text>
                  <TouchableOpacity activeOpacity={1} onPress={() => this.hideModal()}>
                    <View>
                      <Image source={require('../../res/images/closeBtn.png')} style={styles.closeImageStyle}/>
                    </View>
                  </TouchableOpacity>
                </View>
                <View style={styles.productInfoBottomViewStyle}>
                  <Text style={styles.productPriceTextStyle}>¥{price}</Text>
                  <Text style={styles.productSumTextStyle}>已选:{this.props.quantity?this.props.quantity:'0'}件</Text>
                </View>
              </View>
    
              {/*产品数量*/}
              <View style={styles.productSumBgViewStyle}>
                <Text style={{color:'black',fontSize:14}}>    购买数量</Text>
                <View style={styles.productSumRightViewStyle}>
                  <TouchableOpacity activeOpacity={0.8} onPress={()=>{subtractSumBlock?subtractSumBlock():{}}}>
                    <View>
                      <Text style={{fontSize:19,
                                color:Header.KBlackColor,
                                backgroundColor:Header.KLightGrayColor,
                                width:40,
                                height:25,
                                textAlign:'center',
                                marginRight:2}}>-</Text>
                    </View>
    
                  </TouchableOpacity>
                  <View style={{width:40,
                                height:25,
                                justifyContent:'center',
                                alignItems:'center',
                                backgroundColor:Header.KLightGrayColor,
                                marginRight:2}}>
                    <Text style={{fontSize:16,
                                color:'black',
                                backgroundColor:Header.KLightGrayColor,
                                //width:40,
                                //height:25,
                                textAlign:'center',
                                }}>{this.props.quantity}</Text>
                  </View>
    
                  <TouchableOpacity activeOpacity={0.8} onPress={()=>{addSumBlock?addSumBlock():{}}}>
                    <View>
                      <Text style={{fontSize:19,
                                color:Header.KBlackColor,
                                backgroundColor:Header.KLightGrayColor,
                                width:40,
                                height:25,
                                textAlign:'center'}}>+</Text>
                    </View>
                  </TouchableOpacity>
    
                </View>
              </View>
    
              {/*渠道信息*/}
              <View style={styles.channelInfoBgViewStyle}>
                <Text style={{fontSize:13,textAlign:'center',color:Header.KBlackColor,marginLeft:10}}>经销商:{this.state.dealerName}</Text>
                <Text style={{fontSize:13,textAlign:'center',color:Header.KBlackColor}}>门店:{this.state.shopName}</Text>
                <TouchableOpacity activeOpacity={0.5} onPress={()=>{
    
                //通过ref动态获取view,并改变其高度
                  var bottomBgView = this.refs.bottomBgView;
                  var bottomView = this.refs.bottomView;
                  if(!this.state.isFinishEdit){
    
                    Animated.timing(
                      this.state.bottomViewH,
                      {toValue:380,duration:400}
                      ).start();
    
                  }else{
                    Animated.timing(
                      this.state.bottomViewH,
                      {toValue:220,duration:300}
                      ).start();
                  }
    
                  this.setState({
                  isFinishEdit:!this.state.isFinishEdit
                });
    
                }}>
                  <View style={{flexDirection:'row',alignItems:'center',width:40}}>
                    <Image style={{width:15,height:15}} source={require('../../res/images/product_detail_edit@2x.png')}/>
                    <Text style={{color:Header.KBlackColor,fontSize:12,paddingRight:10}}>编辑</Text>
                  </View>
                </TouchableOpacity>
              </View>
    
              <View style={[styles.pickerBgViewStyle,{justifyContent:'center'}]}>
                {this.props.dealerArr.length?this.pickerRender(this.props.dealerArr,true):<Text style={{alignSelf:'center',width:Header.SCREEN_WIDTH/2.0,textAlign:'center'}}>无</Text>}
                {this.props.dealerArr.length?this.pickerRender(this.props.shopArr, false):<Text style={{alignSelf:'center',width:Header.SCREEN_WIDTH/2.0,textAlign:'center'}}>无</Text>}
              </View>
    
              <View style={styles.imageBgStyle}>
                <Image
                //defaultSource={require('../../res/images/personsale_default.png')}
                source={this.props.icon.length?{uri:this.props.icon[0]}:require('../../res/images/personsale_default.png')}
                style={styles.imageStyle}/>
              </View>
    
            </Animated.View>
          </TouchableOpacity>
    
          {/*立即购买/加入购物车*/}
          <View style={{width:Header.SCREEN_WIDTH,
              backgroundColor:this.props.isAddShoppingCart?'orange':'red',
              position:'absolute',
              bottom:Platform.OS == 'ios'?0:20,
              //marginTop:100,
              height:40,
              justifyContent:'center'}}>
          <TouchableOpacity activeOpacity={0.7} onPress={()=>{this.props.isAddShoppingCart?this._addShoppingCartClick():this._addOrderClick()}}>
          <View style={{width:Header.SCREEN_WIDTH,
                               backgroundColor:this.props.isAddShoppingCart?'orange':'red',
    
                               //marginTop:100,
                               height:40,
                               justifyContent:'center'}}>
              <Text style={{color:'white',fontSize:16,textAlign:'center'}}>{this.props.isAddShoppingCart?'加入购物车':'立即购买'}</Text>
          </View>
          </TouchableOpacity>
          </View>
        </Animated.View>
          </TouchableOpacity>
    </Animated.View>
    );
    

    }

    //创建picker选择器
    pickerRender(dataArr, isDealer){
    if(isDealer){
    if(this.state.dealerName === '' && dataArr.length){
    var dealerData = dataArr[0];
    this.setState({
    dealerName:dealerData.distributorName
    });
    this.props.dealerDidSelectBlock(dealerData);
    }
    return(
    <Picker
    prompt="请选择经销商"
    style={{width:Header.SCREEN_WIDTH/2,height:160,marginTop:0,backgroundColor:'white'}}
    selectedValue={this.state.dealerName}
    onValueChange={(itemValue, itemPosition) => {
    if(dataArr.length > itemPosition){
    var dealerData = dataArr[itemPosition];
    this.setState({dealerName: itemValue, isRefreshShopData:true});
    //回调回去告诉其选中的选项
    this.props.dealerDidSelectBlock(dealerData);
    }
    }}
    >
    {this.pickerItemRender(dataArr, true)}
    </Picker>
    );
    }else{
    return(
    <Picker
    prompt="请选择门店"
    style={{width:Header.SCREEN_WIDTH/2,height:160,marginTop:0,backgroundColor:'white'}}
    selectedValue={this.state.shopName}
    onValueChange={(itemValue, itemPosition) => {
    if(dataArr.length > itemPosition){
    var shopName = dataArr.bspShopName;
    this.setState({shopName: itemValue});
    var shopData = dataArr[itemPosition];
    //回调回去告诉其选中的选项
    this.props.shopDidSelectBlock(shopData);
    }
    }}
    >
    {this.pickerItemRender(dataArr, false)}
    </Picker>);
    }
    }

    pickerItemRender(dataArr, isDealer){
    // console.log('来来',dataArr);
    var pickerItemArr = [];
    if(isDealer){
    for(var i = 0;i < dataArr.length;i ++){
    pickerItemArr.push(
    <Picker.Item key={i} label={dataArr[i].distributorName} value={dataArr[i].distributorName} />
    );
    }
    }else{
    for(var i = 0;i < dataArr.length;i ++){
    pickerItemArr.push(
    <Picker.Item key={i} label={dataArr[i].bspShopName} value={dataArr[i].bspShopName} />
    );
    }
    }
    return pickerItemArr;
    }

    /=================================== 各种点击事件 =================================/
    //确认订单事件
    _addOrderClick(){
    const { addOrderBlock } = this.props;
    addOrderBlock?addOrderBlock():{};
    }

    //添加到购物车事件
    _addShoppingCartClick(){
    const { addShoppingCartBlock } = this.props;
    addShoppingCartBlock?addShoppingCartBlock():{};
    }

    //显示
    showModal() {
    Animated.timing(
    this.state.bottomViewH,
    {toValue:220,duration:300}
    ).start();

    Animated.timing(
    this.state.fadeAnim,
    {toValue:1,duration:200}
    ).start();
    
    this.setState({
      pointerEvents:'box-none',
      //fadeAnim:1
    });
    

    }

    //隐藏
    hideModal() {
    Animated.timing(
    this.state.bottomViewH,
    {toValue:0,duration:300}
    ).start();

    Animated.timing(
    this.state.fadeAnim,
    {toValue:0,duration:200}
    ).start();
    
    this.setState({
      pointerEvents:'none',
      //fadeAnim:0
    });
    

    }

    }

    var styles = StyleSheet.create({
    container:{
    //alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,.7)',
    width:Header.SCREEN_WIDTH,
    height:Header.SCREEN_HEIGHT-64,
    //backgroundColor:'red',
    position:'absolute',
    top:64,
    //bottom:0,
    //marginTop:64,
    justifyContent:'flex-end',
    },
    bottomViewBgStyle:{
    width:Header.SCREEN_WIDTH,
    height:Header.SCREEN_HEIGHT-64,
    backgroundColor:'rgba(0,0,0,0)',
    //backgroundColor:'orange',
    marginTop:0,
    justifyContent:'flex-end',
    },
    bottomViewStyle:{
    width:Header.SCREEN_WIDTH,
    //height:220+6,
    backgroundColor:'white',
    //position:'absolute',
    //bottom:220
    marginBottom:Platform.OS == 'ios'?0:10
    },
    imageBgStyle:{
    width:90,
    height:90,
    position:'absolute',
    top:Platform.OS == 'ios'?-20:-40,
    left:10
    },
    imageStyle:{
    width:100,
    height:100,
    borderRadius:5,
    backgroundColor:'white',
    },
    productInfoViewStyle:{
    justifyContent:'space-between',
    width:Header.SCREEN_WIDTH-110,
    height:70,
    //backgroundColor:'red',
    position:'absolute',
    right:0
    },
    productNameTextStyle:{
    fontSize:14,
    color:'gray',
    marginLeft:10,
    marginTop:10
    },
    productPriceTextStyle:{
    fontSize:14,
    color:'red',
    marginLeft:10,
    },
    productSumTextStyle:{
    fontSize:14,
    color:Header.KBlackColor,
    marginLeft:10,
    marginTop:5
    },
    closeImageStyle:{
    // position:'absolute',
    // left:220,
    width:40,
    height:40,
    // top:-10,
    marginTop:-10,
    backgroundColor:'white',
    borderRadius:20
    },
    productInfoUpViewStyle:{
    flexDirection:'row',
    justifyContent:'space-between',
    },
    productInfoBottomViewStyle:{
    justifyContent:'space-between',
    },
    productSumBgViewStyle:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    position:'absolute',
    top:90,
    width:Header.SCREEN_WIDTH,
    height:40,
    borderTopWidth:.5,
    borderTopColor:Header.KGrayColor,
    borderBottomColor:Header.KGrayColor,
    borderBottomWidth:.5
    },
    productSumRightViewStyle:{
    position:'absolute',
    right:10,
    flexDirection:'row',
    alignItems:'center'
    },
    channelInfoBgViewStyle:{
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    position:'absolute',
    top:130,
    width:Header.SCREEN_WIDTH,
    height:40,
    borderTopColor:Header.KGrayColor,
    borderBottomColor:Header.KGrayColor,
    borderBottomWidth:.5
    },
    pickerBgViewStyle:{
    width:Header.SCREEN_WIDTH,
    position:'absolute',
    top:170,
    height:160,
    //backgroundColor:'red',
    flexDirection:'row'
    },

    });

    //导出
    module.exports = ProductDetailAddShopCarOrOrderView;


登录后回复