reactNative常用第三方庫
阿新 • • 發佈:2019-01-11
0.資料儲存
https://github.com/sunnylqm/react-native-storage
1.圖片多選、裁剪
https://github.com/ivpusic/react-native-image-crop-picker
注意:如果你不是用cocoapad匯入的,可以打包,但是匯出會報錯:Failed to verify bitcode in......
需要在project-build settings 搜尋bitcode,把yes改為no
Alert.alert('請選擇', '拍照方式', [{ text: '相機', onPress: () => { this.getPhotoFromCameraOGallary(true); } },{ text: '相簿', onPress: () => { this.getPhotoFromCameraOGallary(false); } },{ text: '取消', onPress: () => { //this.getPhotoFromCameraOGallary(true); } }], {cancelable: false}); //分別從相簿和相機選擇 getPhotoFromCameraOGallary(isCamera) { console.log("isCamera"+isCamera); if (isCamera) { console.log('111'); ImagePicker1.openCamera({ width: 300, height: 400, cropping: false, compressImageQuality: 0.8, }).then(image2 => { console.log(image2.path); var images = this.state.images; images.pop();//移除最後一項 var image = new ImageBean(); image.isAdd = false; image.uri = image2.path; images.push(image); var image1 = new ImageBean(); image1.isAdd = true; images.push(image1); this.setState((prevState) => ({images: images})); }); } else { ImagePicker1.openPicker({ compressImageQuality: 0.8, multiple: true, waitAnimationEnd: false, includeExif: true, forceJpg: true, }).then(images2 => { console.log(images2); var images = this.state.images; images.pop();//移除最後一項 for (let i = 0; i < images2.length; i++) { var image = new ImageBean(); image.isAdd = false; image.uri = images2[i].path; images.push(image); console.log('圖片的地址是' + images2[i].path); } var image1 = new ImageBean(); image1.isAdd = true; images.push(image1); this.setState((prevState) => ({images: images})); }); } }
2.圖片單選
https://github.com/react-community/react-native-image-picker
3.圖片瀏覽
https://github.com/ascoders/react-native-image-viewer
實際使用(GitHub附帶的有記憶體洩露):
//https://github.com/ascoders/react-native-image-viewer import React, {PureComponent, Component} from 'react' import { Text, TouchableOpacity, View, Modal, Navigator } from 'react-native'; import ImageViewer from 'react-native-image-zoom-viewer'; const Dimensions = require('Dimensions'); //必須要寫這一行,否則報錯,無法找到這個變數 const ScreenWidth = Dimensions.get('window').width; const ScreenHeight = Dimensions.get('window').height; let images1 = [{ url: "http://192.168.1.199:8013/upload/images/shgz/6283e29d-adca-4ce8-98c4-e723a3b00ad9.jpg", }, {url: "http://192.168.1.199:8013/upload/images/shgz/6283e29d-adca-4ce8-98c4-e723a3b00ad9.jpg"} ]; class Image { url; } export default class ShowImagesActivity extends Component { // // state = { // // modalVisible: true, // // // }; constructor(props) { super(props); //type表示需要獲取的工單型別:草稿逾期等等 this.state = { showImages: [], index: 0, } } componentWillMount() { let images = []; let needShowUri = this.props.navigation.state.params.clickUri; for (let i = 0; i < this.props.navigation.state.params.data.length; i++) { let image = new Image(); image.url = this.props.navigation.state.params.data[i]; if (this.props.navigation.state.params.data[i] == needShowUri) { this.setState((prevState) => ({index: i}), () => { }); } images.push(image); } // images1 = images this.setState((prevState) => ({showImages: images}), () => { console.log("傳遞過來的資料" + JSON.stringify(this.state.showImages)); }); } render() { return ( <View style={{flex: 1}}> <ImageViewer loadingRender={() => { return (<Text style={{color: 'red'}}>拼命載入中....</Text>) }} onClick={() => { this.props.navigation.goBack(); }} imageUrls={this.state.showImages} index={this.state.index}/> </View> ) } }
4.二維碼掃描
https://blog.csdn.net/shb2058/article/details/80663122
5.日期選擇器
https://github.com/beefe/react-native-picker
//時間選擇器 _showTimePicker(isStart) { let years = [], months = [], days = [], hours = [], minutes = []; for (let i = 0; i < 10; i++) { years.push(i + 2018); } for (let i = 1; i < 13; i++) { months.push(i); } for (let i = 1; i < 32; i++) { days.push(i); } for (let i = 1; i < 60; i++) { minutes.push(i); } for (let i = 1; i < 24; i++) { hours.push(i); } // let pickerData = [years, months, days, ['am', 'pm'], hours, minutes]; let pickerData = [years, months, days, hours, minutes]; let date = new Date(); let selectedValue = [ date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes() ]; Picker.init({ pickerConfirmBtnText: '確認', pickerCancelBtnText: '取消', pickerData, selectedValue, pickerTitleText: '選擇時間', wheelFlex: [2, 1, 1, 1, 1], onPickerConfirm: pickedValue => { console.log('area', pickedValue); if (isStart) { // this.setState((prevState) => ({startTime: pickedValue[0] + '-' +this.changeNum(pickedValue[1]) + '-' + this.changeNum(pickedValue[2]) + ' ' + this.changeNum(pickedValue[3]) + ':' + this.changeNum(pickedValue[4])})); // this.setState((prevState) => ({startTime: pickedValue[0] + '-' + pickedValue[1] + '-' + pickedValue[2] + ' ' + pickedValue[3] + ':' + pickedValue[4]})); } else { //結束時間必須必當前大 let date = new Date(); if (date.getMonth() + 1 > pickedValue[1]) { Alert.alert('請選擇正確的結束時間'); return; }else { if (date.getDate() > pickedValue[2]) { Alert.alert('請選擇正確的結束時間'); return; }else { if (date.getHours() > pickedValue[3]) { Alert.alert('請選擇正確的結束時間'); return; }else { if (date.getMinutes() > pickedValue[4]) { Alert.alert('請選擇正確的結束時間'); return; } } } } this.setState((prevState) => ({stopTime: pickedValue[0] + '-' + this.changeNum(pickedValue[1])+ '-' + this.changeNum(pickedValue[2]) + ' ' + this.changeNum(pickedValue[3]) + ':' + this.changeNum(pickedValue[4])})); } }, onPickerCancel: pickedValue => { console.log('area', pickedValue); }, onPickerSelect: pickedValue => { let targetValue = [...pickedValue]; if (parseInt(targetValue[1]) === 2) { if (targetValue[0] % 4 === 0 && targetValue[2] > 29) { targetValue[2] = 29; } else if (targetValue[0] % 4 !== 0 && targetValue[2] > 28) { targetValue[2] = 28; } } else if (targetValue[1] in {4: 1, 6: 1, 9: 1, 11: 1} && targetValue[2] > 30) { targetValue[2] = 30; } // forbidden some value such as some 2.29, 4.31, 6.31... if (JSON.stringify(targetValue) !== JSON.stringify(pickedValue)) { // android will return String all the time,but we put Number into picker at first // so we need to convert them to Number again targetValue.map((v, k) => { if (k !== 3) { targetValue[k] = parseInt(v); } }); Picker.select(targetValue); pickedValue = targetValue; } } }); Picker.show(); }
6.支援中文
import React, {Component} from 'react';
import {Platform, TextInput, View} from 'react-native';
import PropTypes from 'prop-types';
export default class ChatInputView extends Component {
state={
fakeValue:this.props.value,//pure display here
refresh:false,//right clear
hadDefaultValue:true,
}
//無法通過state來設定textinput的顯示,需做特殊處理
//設定有預設值==這是第一種手動設定textinput內容的方法
setHadDefaultVale(){
this.setState({hadDefaultValue:true});
}
componentDidUpdate(prevProps){//right clear
if(this.state.hadDefaultValue){
this.setState({hadDefaultValue:false},()=>{
this.setState({fakeValue:this.props.value, refresh:true}, ()=>this.setState({refresh: false}, ()=>this.input.blur()));//render null make blur perhaps, so do focus.
});
}else {
if(prevProps.value!==this.props.value&&this.props.value===''&&Platform.OS==='ios'){
this.setState({fakeValue:'', refresh:true}, ()=>this.setState({refresh: false}, ()=>this.input.focus()));//render null make blur perhaps, so do focus.
}
}
}
focus=()=>{
this.input.focus();
}
blur=()=>{
this.input.blur();
}
clear=()=>{
this.input.clear();
}
//設定有預設值==這是第二種手動設定textinput內容的方法
setFakeValue=fakeValue=>this.setState({fakeValue});//when parent setState({input}), call this too.
render(){
if(this.state.refresh){//right clear
return null;
}
return(
<TextInput
{...this.props}
ref={ref=>this.input=ref}
value={Platform.OS==='ios'?this.state.fakeValue:this.props.value}//only ios need this.
/>
);
}
// static propTypes = {
// ...View.propTypes,
// hadvalue: PropTypes.bool.isRequired,
// choosePersonFun: PropTypes.func,
// }
//
// constructor(props) {
// super(props);
// this.state = {hadvalue: false}
// }
//
// shouldComponentUpdate(nextProps) {
// console.log('shouldComponentUpdate前' + this.props.value + '後' + nextProps.value);
// if (nextProps.value.indexOf('@') != -1) {
// console.log('需要更新的資料中包含@');
// if (nextProps.value.lastIndexOf('@') === nextProps.value.length - 1) {
// console.log('新輸入了@符號');
// try {
// this.props.choosePersonFun();
// // nextProps.value = '';
// }
// catch (e) {
// console.log(e);
// }
//
// // return false;
// } else {
// console.log('不是新輸入的@' + nextProps.value);
// }
// }
// if (this.props.hadvalue) {
// this.props.hadvalue = false;
// //如果有初始值,則直接返回true,否則就去判斷
// return true;
// } else {
// // console.log("現在輸入的"+nextProps.value+"本來的value"+this.props.value);
// return Platform.OS !== 'ios'
// || (this.props.value === nextProps.value && (nextProps.defaultValue == undefined || nextProps.defaultValue == ''))
// || (this.props.defaultValue === nextProps.defaultValue && (nextProps.value == undefined || nextProps.value == ''));
// }
// }
//
// hadVlaue() {
// this.setState((prevState) => ({hadvalue: true}));
//
// }
//
// render() {
// return <TextInput {...this.props} />;
// }
}