undefined 不是對象（評估 config.options[0]）React Native

Question

我正在為 iPhone 開發一個 React Native 應用程序。我需要從 iPhone 上傳一個圖像到 iPhone 應用程序。下面是我們點擊“添加照片”后立即顯示選項的代碼。

反饋屏幕.js：

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions, TouchableOpacity, Image } from 'react-native';
import { ActionSheet, configuration, onSelect, Root, options } from 'native-base';

const width = Dimensions.get('window').width;
export default class FeedBackScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: []
    }
  }

  onClickAddPhoto = () => {
    const BUTTONS = ['Take Photo', 'Choose Photo Library', 'Cancel'];
    ActionSheet.show({
      configuration: {
        options: BUTTONS,
        cancelButtonIndex: 2,
        title: 'Select a Photo'
      }
    },{
      onSelect: buttonIndex => {
        switch (buttonIndex) {
          case 0:
            break;
          case 1:
            break;
          default:
            break;
        }
      }
    })
  }

  renderItem = ({ item, index }) => {
    return (
      <View>
        <Image
          source={item.url}
          style={styles.itemImage}
        />
      </View>
    )
  };

  render() {
    let { content, btwPressStyle } = styles;
    let { fileList } = this.state;
    return (
      <Root>
        <View style={content}>
          <Text>Sample React Native Add Image</Text>
          <FlatList
            data={fileList}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index.toString()}
            extraData={this.state}
          />
          <TouchableOpacity onPress={this.onClickAddPhoto}
            style={styles.btwPressStyle}>
            <Text>Add Photo</Text>
          </TouchableOpacity>
        </View>
      </Root>
    )
  }
};

const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50
  },
  btwPressStyle: {
    backgroundColor: 'blue',
    height: 50,
    width: 100,
    alignItems: 'center'
  },
  itemImage: {
    backgroundColor: '#2F455C',
    height: 150,
    width: width - 60,
    borderRadius: 8,
    resizeMode: 'contain'
  }
})

以前我安裝了以下軟件包：

npm 安裝 --save react-native-image-crop-picker

npm 安裝 --save native-base

當我運行時，出現以下錯誤：

TypeError:undefined is not an object(evaluating 'config.options[0]')

你能幫我解決我出錯的地方嗎？在此先感謝

Answer 1

如果您查看nativebase ActionSheet 文檔，則 show() 方法中沒有configuration命名參數。

因此，您必須使用以下代碼顯示 ActionSheet：

  onClickAddPhoto = () => {
    const BUTTONS = ['Take Photo', 'Choose Photo Library', 'Cancel'];
    ActionSheet.show({
      options: BUTTONS,
      cancelButtonIndex: 2,
      title: 'Select a Photo'
    }, 
      buttonIndex => {
        switch (buttonIndex) {
          case 0:
            break;
          case 1:
            break;
          default:
            break;
        }
    })
  }

刪除configuration參數並直接傳遞選項。

另請注意，show() 中沒有onSelect參數，它只是buttonIndex 。