反應本機圖像選擇器：無法讀取未定義的屬性'showImagePicker'

我正在使用react-native-image-picker完全按照https://github.com/marcshilling/react-native-image-picker中所示的示例，通過終端使用react-native run-ios並通過Atom編輯器進行編碼。反應本機圖像選擇器：無法讀取未定義的屬性'showImagePicker'

我做npm install [email protected] --save和目前的package.json依賴性顯示："react-native-image-picker": "^0.22.8",

而且我點擊了一個按鈕來觸發imagePicker但我得到的錯誤：Cannot read property 'showImagePicker' of undefined。

我在做什麼錯？

下面是代碼

import ImagePicker from 'react-native-image-picker' 
var Platform = require('react-native').Platform 

var options = { 
    title: 'Select Avatar', 
    customButtons: [ 
    {name: 'fb', title: 'Choose Photo from Facebook'}, 
    ], 
    storageOptions: { 
    skipBackup: true, 
    path: 'images' 
    } 
} 

export default class chooseImage extends Component { 
    constructor() { 
    super() 

    this.state = { 
     avatarSource: "", 
    } 
    } 

    _uploadImage() { 
    ImagePicker.showImagePicker(options, (response) => { 
     console.log('Response = ', 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 { 
     // You can display the image using either data... 
     const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true}; 

     // or a reference to the platform specific asset location 
     if (Platform.OS === 'ios') { 
      const source = {uri: response.uri.replace('file://', ''), isStatic: true}; 
     } else { 
      const source = {uri: response.uri, isStatic: true}; 
     } 

     this.setState({ 
      avatarSource: source 
     }) 
     } 
    }) 
    } 

    render() { 

    return (
     <View style={styles.container}> 
      <TouchableHighlight 
      onPress={this._uploadImage} 
      underlayColor='transparent' 
      > 
      <Image 
       source={this.state.avatarSource} style={styles.uploadAvatar} 
      /> 
      </TouchableHighlight> 
     </View> 
    ) 
    } 
}

編輯

當我CONSOLE.LOG（ImagePicker）

來源

2016-09-24 Jo Ko

你是否在平臺特定的安裝的東西，如：https：//github.com/marcshilling/react-native-image-picker#ios，和：https：//github.com/marcshilling/react-native-圖像選擇器＃android – Cherniv

@Cherniv我正在通過Atom編輯器和終端，而不是xcode做React Native。在我的另一個項目中，我所要做的只是npm安裝，並且工作。 –

好像沒有定義IMagePicker。

您是否嘗試過使用

var ImagePicker = require('react-native-image-picker');

，而不是第一線？

來源

2016-09-24 07:45:16

是的，我給了一個嘗試以及之前，但仍然得到了相同的錯誤.. –

cannot read property y of undefined表示您有語句x.y 使x未定義。在這種情況下，x是ImagePicker。我最好的猜測是你的導入語句導致了這個問題。試試這個：的

var ImagePicker = require('react-native-image-picker');

代替

import ImagePicker from 'react-native-image-picker'

這也是例子說明什麼。

如果你想堅持使用 import聲明

，

試試這個：

import * as ImagePicker from 'react-native-image-picker'

其中進口的模塊ImagePicker，並把它的範圍內。欲瞭解更多信息，請參見：MDN on import statement

來源

2016-09-24 07:53:01 nadavvadan

我實際上嘗試過所有他們之前，但仍然有同樣的錯誤。我實際上是以同樣的方式在另一個項目上使用它，但唯一的區別是它是'「react-native-image-picker」：「^ 0.21.5」'。所以我現在開始考慮它是否與最新的更新有關？ –

JoKo我明白了。你是否按照這裏的步驟？ https://github.com/marcshilling/react-native-image-picker#install – nadavvadan

是的，我只是'npm安裝react-native-image-picker @ latest --save'，並在我的package.json中顯示' 「react-native-image-picker」：「^ 0.22.8」，「 –

喜有幾件事情，你可以嘗試：運行react-native link

確保你已經完成了這一步 http://prntscr.com/hftr17

如果沒有：你最後一次機會是徹底刪除你的代碼。克隆一個新的。

我成功地讓它按照那些工作。

希望它能給你一些東西。

來源

2017-11-24 08:22:25 chiquyet

重建您的應用程序。運行命令react-native run-ios和react-native run-android。

來源

2017-12-22 10:16:31

重建你的應用程序意味着你會得到同樣的錯誤。

你需要經歷的Xcode iOS和手動編輯settings.gradle這個工作：

https://github.com/react-community/react-native-image-picker

你並不需要做對Android和iOS的步驟，但針對任一平臺列出的步驟至關重要

因此，除非您已執行react-native link，否則您需要檢查每個編號的步驟，並確保您的二進制文件已正確鏈接。

來源

2017-12-23 00:49:18 theberbie

反應本機圖像選擇器：無法讀取未定義的屬性'showImagePicker'

回答

相關問題