undefined 不是对象（评估 config.options[0]）React Native

Question

我正在为 iPhone 开发 React Native 应用程序。我需要将图像从 iPhone 上传到 iPhone 应用程序。下面是我们点击“添加照片”时显示选项的代码。

FeedBackScreen.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 install --save react-native-image-crop-picker

npm install --save native-base

当我运行时，我收到以下错误：

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

你能帮我解决我哪里出错了吗？在此先感谢

Answer 1

如果您看到nativebase ActionSheet documentation，则表明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参数，直接传递options。

还要注意，show() 中没有 onSelect 参数，只有 buttonIndex。