在我的本机应用程序中,我使用了本机图像选择器,但是当我成功选择图像或从相机拍摄照片时,它正在打开键盘。这就是我组织代码的方式,这个问题仅发生在ios中。
const openPicker = async (type, setFileObject, question, setImages, images) => {
// if (setImages && images) {
// setImages(null);
// }
var options;
if (type === 4) {
options = {
title: strings('picker.q-i-pick'),
takePhotoButtonTitle: strings('picker.tphoto'),
chooseFromLibraryButtonTitle: strings('picker.cgallery'),
cancelButtonTitle: strings('picker.cancel'),
mediaType: 'photo',
quality: 1,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
}
if (type === 5) {
options = {
title: strings('picker.q-v-pick'),
takePhotoButtonTitle: strings('picker.tphoto'),
chooseFromLibraryButtonTitle: strings('picker.cgallery'),
cancelButtonTitle: strings('picker.cancel'),
mediaType: 'video',
durationLimit: question.question.duration,
videoQuality: Platform.OS === 'android' ? 'high' : 'high',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
}
if (type === 3) {
options = {
title: strings('picker.q-v-pick'),
takePhotoButtonTitle: strings('picker.tphoto'),
chooseFromLibraryButtonTitle: strings('picker.cgallery'),
cancelButtonTitle: strings('picker.cancel'),
mediaType: 'video',
durationLimit: question.question.duration,
videoQuality: Platform.OS === 'android' ? 'high' : 'high',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// RNFetchBlob.fs.readFile(response.path, 'base64').then((data) => {
// response['data'] = data;
// response['type'] = 'mp4';
// response['fileName'] = 'videomulti.mp4';
// setFileObject(response);
// });
response['type'] = 'video/mp4';
response['fileName'] = 'videomulti.mp4';
setFileObject(response);
}
});
}
if (type === 4 || type === 5) {
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
if (type === 4) {
setFileObject(response);
}
if (type === 5) {
console.log(response);
response['type'] = 'video/mp4';
response['fileName'] = 'videomulti.mp4';
setFileObject(response);
// RNFetchBlob.fs.readFile(response.path, 'base64').then((data) => {
// response['data'] = data;
// response['type'] = 'mp4';
// response['fileName'] = 'videomulti.mp4';
// setFileObject(response);
// });
}
}
});
}
};
我正在这样的组件内部调用此函数。
const DocumentUpload = (props) => {
const { type, fileObject, setfilename, question } = props;
let [isVisible, setIsVisible] = useState(false);
const [uploded, setUploded] = useState(false);
const [state, setState] = useState({
fullscreen: false,
play: false,
currentTime: 0,
duration: 0,
showControls: true,
});
const [images, setImages] = useState(null);
useEffect(() => {
if (fileObject && fileObject.length !== 0 && type === 4) {
let imageArr = [];
let imageItem;
fileObject.map((item, index) => {
imageItem = {
ilustration: item.uri,
};
imageArr.push(imageItem);
});
setImages(imageArr);
}
}, [fileObject, type]);
const player = createRef();
return (
<View>
{(type === 5 || type === 3) && fileObject && fileObject.length !== 0 && (
<View style={styles.videoContainer}>
<View style={styles.videoInnerContainer}>
<TouchableWithoutFeedback
onPress={() => showControls(state, setState)}>
<View style={{ flex: 1 }}>
<Video
source={{
uri: fileObject[0].path,
}}
controls={false}
style={styles.backgroundVideo}
ref={player}
resizeMode={'contain'}
paused={!state.play}
onEnd={() => onEnd(state, setState, player)}
onLoad={(data) => onLoadEnd(data, state, setState)}
onProgress={(data) => onProgress(data, state, setState)}
/>
{state.showControls && (
<View style={styles.controlsOverlay}>
<PlayerControls
play={state.play}
playVideo={handlePlayPause}
state={state}
setState={setState}
pauseVideo={handlePlayPause}
/>
</View>
)}
</View>
</TouchableWithoutFeedback>
</View>
</View>
)}
{type === 4 && fileObject && fileObject.length !== 0 && images && (
<View style={{ alignItems: 'center', height: '70%' }}>
<ImageCarousel images={images} uploadedImages={true} />
</View>
)}
{type === 4 && fileObject && !images && (
<View style={styles.loadderContainerWI}>
<Image source={spinner} resizeMode={'center'} />
</View>
)}
{!fileObject || fileObject.length === 0 ? (
<>
<TouchableOpacity
onPress={
// () => setIsVisible(true)
() => openPicker(type, setfilename, question)
}>
<Image
source={Platform.OS === 'android' ? require('_assets/img/cmerap.png') : require('_assets/img/cmerapios.png')}
resizeMode={Platform.OS === 'android' ? "center" : "center"}
style={Platform.OS === 'android' ? styles.camPImageWV : styles.camPImageWVIos}
/>
</TouchableOpacity>
<AppText styles={styles.camPTextIos}>
{strings('assetsment.capture')}
</AppText>
</>
) : (
<>
{type === 4 && images && (
<View
style={[
styles.videoBottomText,
images ? { marginTop: '9%' } : null,
]}>
<TouchableOpacity
onPress={
// () => setIsVisible(true)
() =>
openPicker(type, setfilename, question, setImages, images)
}>
<View style={styles.updateAgainContainer}>
<AntIcon name="reload1" style={styles.reloadIcon} />
<AppText styles={styles.reloadText}>
{strings('assetsment.reload')}
</AppText>
</View>
</TouchableOpacity>
</View>
)}
{(type === 5 || type === 3) && (
<View style={styles.videoBottomText}>
<TouchableOpacity
onPress={
// () => setIsVisible(true)
() =>
openPicker(type, setfilename, question, setImages, images)
}>
<View style={styles.updateAgainContainer}>
<AntIcon name="reload1" style={styles.reloadIcon} />
<AppText styles={styles.reloadText}>
{strings('assetsment.reload')}
</AppText>
</View>
</TouchableOpacity>
</View>
)}
</>
)}
</View>
);
};
选择图像后,在ios中关闭选择器,即使该组件中没有任何输入字段,它也会打开键盘,但仅在第一次选择图像时发生,第二次未发生。那么有人可以帮我吗?我尝试在选择图像后通过调用keyboard.dismiss()手动关闭键盘,但是这也没有用。谢谢