Question

我想在ActionSheetIOS上使用iOS，而不是原生的选择器轮。

我的应用程序崩溃了，我该如何显示我的组件？

这是我的Picker组件：

// Picker.ios.js    
import React, { Component } from "react";

import { StyleSheet, ActionSheetIOS, View } from "react-native";

const PickerList = props => {
  const { label, options, selectedValue, name, onChange, identifier } = props;

  return ActionSheetIOS.showActionSheetWithOptions(
    {
      options: options,
      cancelButtonIndex: 1,
      destructiveButtonIndex: 2
    },
    optionIndex => {
     console.log('clicked')
    }
  );
};

export default PickerList;

我使用条件渲染来显示我的选择器，以及特定于平台的导入：

         import Picker from "./common/Picker";

           {setYear
                    ? <Picker
                          selectedValue={setGroup}
                          label="Year group"
                          onChange={this.onGroupChange}
                          options={
                              categories.find(category => {
                                  return category.id == setYear;
                              }).options
                          }
                      />
                    : null}

Answer 1

ActionSheetIOS只显示选项，你必须有一些视图组件来替换视图中的选择器。我使用TouchableOpacity ja ActionSheetIOS来替换IOS上的Picker，如下所示：

<TouchableOpacity onPress={this.onSelectCategory.bind(this)}>
  <Text style={styles.textInputStyle}>
    {this.state.category}
  </Text>
</TouchableOpacity>

onSelectCategory() {
  ActionSheetIOS.showActionSheetWithOptions(
  { options: FEEDBACK_CATEGORIES},
  (buttonIndex) => this.setState({ category: FEEDBACK_CATEGORIES[buttonIndex] }));
}

我使用this.state.category在TouchableOpacity中显示我的选择
当用户按下TouchableOpacity时，显示ActionSheetIOS
当用户选择选项时，调用回调函数并更新选择了this.state.category的索引

React-Native，ActionSheetIOS显示而不是Picker

1 个答案: