ReactNative组件

react native第三方组件

本篇主要列举rn界面开发中常用三方组件，用作设计中可参考选择,一般配合使用useState\useEffect使用，在多个js页面传值时，为了共用或传递数据方便，也会使用hooks（）【包含 调用方法】。
注意 所有三方组件都需要 使用npm或yarn命令安装后使用

1、react-native-picker（类似下拉选择框）

npm安装或使用yarn，百度搜索即可；放入rn项目的js中，节点渲染，点击事件触发。
用法：

import Picker from 'react-native-picker';

const pickerShow=()=>{
        Picker.init({
            pickerData: ["商品房","住宅","商场","写字楼"

                ],
            selectedValue: ['商品房'],
            pickerConfirmBtnText:'确定',
            pickerCancelBtnText:'取消',
            pickerTitleText:'选择权证类型',
            pickerToolBarBg: [232, 232, 232, 1],
            pickerBg:[245,245,245,1],
            pickerToolBarFontSize: 16,
            pickerFontSize: 20,
            onPickerConfirm: async(data) => {
                console.log(data)
                if(data){
                  setQzType(data);
                }else{
                  setQzType("");
                  
                }
                
            }
        });
        Picker.show();
    }
	
	
	<Box flexDirection="row" alignItems = "center" paddingVertical="s" borderBottomWidth={StyleSheet.hairlineWidth} borderBottomColor="darkGrey">
          <Text variant="userh1">权证类型</Text>
            <TouchableOpacity onPress={()=> pickerShow()} style={styles.pickerCss} >
              <Text style={styles.valueText}>{qzType}</Text>
              <Icon name="md-caret-down-outline" size={32} color="#1890ff" />
               
            </TouchableOpacity>
        </Box>

2、react-native-common-date-picker (年月日格式的日期组件下拉选择)

使用时可自己封装成组件，别的界面使用，引入自己封装的组件即可，此处案例为封装后的组件，更丰富的用法，可查看该组件的api（DatePicker），rn推荐的import DateTimePicker from ‘@react-native-community/datetimepicker’，有android和ios区别，且单纯的日期格式不造咋设置，基本都是带时间的，要根据展示格式选择

import React,{ useEffect,useState }  from "react";
import {  Modal,StyleSheet,View,Text, TouchableOpacity} from "react-native";
import {DatePicker} from "react-native-common-date-picker";

const DatePickerModel=({visible,onClose,onSelect,value})=>{
    

    const [pickerValue,setPickerValue]=useState("");
    const [mvisible,setMvisible]=useState(false);
    useEffect(()=>{
        if(value){
            setPickerValue(value);
            
        }
    },[value]);
   
    useEffect(()=>{
      setMvisible(visible);
  },[visible]);

  
    return (<Modal animated transparent={true} animationType="fade" visible={mvisible}>
        <View style={styles.container}>
        <View style={styles.pickerContainer}>
            <DatePicker
       cancelText="取消"
       confirmText="确定"
       defaultDate={pickerValue}
       minDate="1980-1-1"
       confirm={(date) => {
           onSelect(date);
           
       }}

       cancel={() => onClose()}
   />
           
        </View>
        </View>
    </Modal>)
};


const styles=StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.5)',
      },
      pickerContainer: {
        height: 200,
        width: '100%',
        backgroundColor: 'white',
      },
      label: {
        textTransform: 'capitalize',
      },
      header: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: "white",
      },
});
export default DatePickerModel;

使用效果图如下