Question

我无法创建可折叠的下拉列表。我感觉这是由于我正在映射的数据格式，还是因为我在地图中嵌套了地图。或者因为我应该在渲染之外进行。我不确定，我感到疲惫不堪，只需要多留一双眼睛。

export default class GardenList extends Component {
  constructor(props){
    super(props)

    this.state = {
      visibleItems: null,
      isChecked: null
    }

  }

  toggleMenu(i){
    var newI = i;
    this.state.visibleItems === i ? (newI = null) : null;
    this.setState({
      visibleItems: newI
    })
  }

  toggleCheck(i){
    this.setState({
      isChecked: i
    })
  }

    render(){

      const methods = [
        'Permaculture',
        'Home Compost',
        'Companion Planting',
        'Intensive Gardening',
        'Spin Farming',
        'Intregrated Pest Management'];

      const soil = ['Gypsum', 'BioChar'];

      const space = ['Unframed Beds', 'Straw Bale Beds', 'Vertical Gardening'];

      const listAndType = [
        {name: 'Growing methods', type: methods },
        {name: 'Soil ammendments', type: soil},
        {name: 'Plant space', type: space}
      ];



      return(
        <View style={ baseStyles.profileContainer }>
          <View style={baseStyles.listContainer1}>
            {
              listAndType.map((item, i) => (
                <View key={i}>
                  <TouchableOpacity onPress={() => this.toggleMenu(i)}>
                    <View style={ baseStyles.touchableList }>
                      <Text>{item.name}</Text>
                      {this.state.visibleItems === i ? icon1 : icon2}
                    </View>
                  </TouchableOpacity>

                  {/*This is where I'm trying to have a list of types show up*/}

                </View>
              ))
            }


          </View>

        </View>
      )
  }

}

所以我的评论在哪里，我在考虑通过属于该对象的数组进行映射。因此，如果我在第一个TouchableOpacity上切换菜单，则types的列表将下拉。我在访问那些types时遇到了麻烦。

我当时正在考虑在初始映射中使用键索引映射第一个类型列表。类似于item[i].map((type, index) => etc，但收到未定义的错误。我尝试了各种事情，但没有运气。

有什么建议吗？

谢谢

Answer 1

虽然这可能无法直接回答您的问题，但我有个建议。

移动UI不适用于下拉列表之类的东西，您在定位，小屏幕和粗大手指方面遇到各种问题。我有时知道客户坚持的是什么，但是我发现此工作流程更好：

让用户点击控件
将新屏幕推到导航堆栈上，用户可以从中选择内容或显示模式。
使用户在选定项目的情况下返回原始控件。

此UI的好处是您可以在列表顶部包括搜索功能，或者添加其他一些逻辑以简化用户的生活。

如果您没有太多选择的替代方法，则使用单选按钮样式控件，但这应仅限于小项目。

如果您想查看这两个工作流程的运行情况，我有一个表单构建器应用程序，该应用程序按照https://www.efrs.io所述的方式使用了两者。添加一个“ QuickPick”控件，您可以在两种类型之间切换。

如何折叠下拉列表React Native

1 个答案: