带有React本机图像选择器的Typescript通用承诺

我正在学习react nativv v0.56和react社区的react native image picker（）。我正在尝试使用类型脚本在iOS上实现图像选择器。A遵循了所有安装指令，但出现了一个错误。现在我正试图用承诺来实现它。这是我尝试的，在控制台调试器中没有得到任何错误。 以下是我的实验代码：

import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ImageSourcePropType, ImageURISource } from 'react-native';
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-picker';

import { ScreenID } from '../screenID'


export interface IWelcomeScreenProps {
  navigator: Navigator;
  componentId: string;
}

export interface IWelcomeScreenState {
  pickedImage: ImageURISource;
 }


export class WelcomeScreen extends React.Component<IWelcomeScreenProps, IWelcomeScreenState> { 

  constructor(props: IWelcomeScreenProps)
  { 
    super(props);

    this.state = {
      pickedImage : {
        uri: undefined
      }
    };

    Navigation.events().bindComponent(this);
    this.pushMapsScreen = this.pushMapsScreen.bind(this);
  }

  async pushMapsScreen()
  {
    await Navigation.push(this.props.componentId, {
      component: {
        name: ScreenID.mapScreen
      }
    })
  }

  async pickImageHandler()
  {
    return new Promise<ImageURISource>( (resolve, reject) => 
    {
      ImagePicker.showImagePicker({
        title: 'Select Image'
      },
      result => 
      {
        if(result.didCancel)
        {
          reject('Image pick canceled!')
        }
        else if(result.error)
        {
          reject(result.error)
        }
        else
        {
          resolve(result);
        }
      });
    }).then(x => {
      this.setState({
        ...this.state,
        pickedImage: {uri: x.uri}
      })
    }).catch(x => {
      new Error(x.error)
    });
  }

  //static declaration of the layout of the this screen
  static get options()
  {
    return {
      topBar:
      {
        title:
        {
          text: 'Mapporia Routes',
          fontSize: 20,
          color: 'red'
        }
      }
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Mapporia Routes!
        </Text>
        <TouchableOpacity onPress={ this.pushMapsScreen }>
          <Icon name="map" size={200} color="#900"/>
        </TouchableOpacity>
        <Text style={styles.instructions}>
          Pannonic IT
        </Text>
        <Image source={this.state.pickedImage} style={styles.previewImage} />
        <TouchableOpacity style={ styles.button } onPress={this.pickImageHandler}>
          <Text style={styles.buttonText}>PICK IMAGE</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontSize:30
  },
  button:{
    marginTop: 20,
    backgroundColor: 'blue',
    padding:10
  },
  buttonText:{
    color: 'white',
    fontSize: 20
  },
  previewImage:{
    width: 250,
    height: 160,
    backgroundColor: 'black' 
  }
});

import*as React from'React'；
从“react native”导入{样式表、文本、视图、TouchableOpacity、图像、ImageSourcePropType、ImageURISource}；
从“react native Navigation”导入{Navigation}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native image picker”导入ImagePicker；
从“../ScreenID”导入{ScreenID}
导出接口IWelcomeScreenProps{
导航器：导航器；
componentId：字符串；
}
导出接口IWelcomeScreenState{
PickeImage:ImageURISource；
}
导出类WelcomeScreen扩展了React.Component{
构造器（道具：IWelcomeScreenProps）
{ 
超级（道具）；
此.state={
PickeImage：{
uri：未定义
}
};
Navigation.events（）.bindComponent（此）；
this.pushMapsScreen=this.pushMapsScreen.bind（this）；
}
异步pushMapsScreen（）
{
等待导航。推送（this.props.componentId{
组成部分：{
名称：ScreenID.mapScreen
}
})
}
异步pickImageHandler（）
{
返回新承诺（（解决、拒绝）=>
{
ImagePicker.showImagePicker({
标题：“选择图像”
},
结果=>
{
if（result.didconcel）
{
拒绝（'图像拾取已取消！'）
}
else if（result.error）
{
拒绝（结果错误）
}
其他的
{
决心（结果）；
}
});
}).然后（x=>{
这是我的国家({
…这个州，
pickeImage:{uri:x.uri}
})
}).catch（x=>{
新错误（x.Error）
});
}
//此屏幕布局的静态声明
静态获取选项（）
{
返回{
顶栏：
{
标题：
{
文本：“Mapporia路线”，
尺寸：20，
颜色：“红色”
}
}
}
}
render（）{
返回(
欢迎来到Mapporia路线！
泛诺尼克IT
拾取图像
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
尺寸：30
},
按钮：{
玛金托普：20，
背景颜色：“蓝色”，
填充：10
},
按钮文字：{
颜色：'白色'，
尺寸：20
},
预览图像：{
宽度：250，
身高：160，
背景颜色：“黑色”
}
});

使用react native image picker npm软件包v0.26.10和typescript 2.9.2 ImagePicker时未定义，因为index.d.ts中的类型声明错误

解决方案： 在包的index.d.ts文件中删除类定义并添加

export function showImagePicker(options: Options, callback: (response: Response) => void): void;
export function launchCamera(options: Options, callback: (response: Response) => void): void;
export function launchImageLibrary(options: Options, callback: (response: Response) => void): void;

然后像这样导入函数

import { showImagePicker } from 'react-native-image-picker';

其他信息：

• React本机版本：0.56
• 平台：iOS
• 开发操作系统：MacOS High Siera
• 开发工具：VS代码

---

修改软件包只能用作快速修复，但在任何情况下都不能被视为永久解决方案。