0

我正在学习react-nativv v0.56和 react 社区的 react-native-image-picker ( this )。我正在尝试使用TypeScript在 iOS 上实现他的图像选择器。A 遵循所有安装说明，但出现错误。现在我正在尝试使用Promise来实现它。这是我正在尝试的，在控制台调试器中没有任何错误。这是我的实验代码：

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' 
  }
});
4

1 回答 1

0

当使用 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';

附加信息：

  • 反应原生版本：0.56
  • 平台：iOS
  • 开发操作系统：MacOS High Siera
  • 开发工具：VS 代码
于 2018-07-27T19:32:04.597 回答