ios - 选择图像后反应原生图像选择器打开键盘？

Question

在我的 react native 应用程序中，我使用了 react native 图像选择器，但是当我成功选择图像或从相机拍照时，它正在打开键盘。这就是我组织代码的方式，这个问题只发生在 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() 手动关闭键盘，但这也徒劳无功。谢谢

标签： iosreact-native