Question

我正在尝试实现一种自动完成输入，当用户开始键入时，该输入具有在文本输入下方的滚动视图，其中包含可按的建议行。仅在Android上出现问题，因为文本输入下方的具有绝对位置的组件位于父容器之外，因此无法按下或滚动该组件。最好的解决方法是什么？我已经尝试过更改父容器的zIndex以及滚动视图，但是仍然无法正常工作。

如果您想测试以下网址，请输入以下小吃代码网址：snack.expo.io/HkLeBYV18

这是我要实现的屏幕截图，用红色圆圈圈出的内容无法按下，或在Android上无法执行任何操作：

Answer 1

您愿意使用

之类的自定义下拉菜单吗？

https://github.com/sohobloo/react-native-modal-dropdown https://github.com/maxkordiyak/react-native-dropdown-autocomplete#readme

请检查这些库是否可以使用。

Answer 2

我通过将Scrollview状态添加到isHideScroll侦听器中，解决了您在onPress内按下或滚动搜索数据的问题。 isHideScroll标志用于有条件地显示和隐藏Scrollview。请检查以下博览会小吃代码：-

https://snack.expo.io/@vishal7008/scroll-and-press-issue

但这不是从列表中搜索数据的最佳方法

您需要添加FlatList代替ScrollView，并使用filter函数搜索数据。请检查以下添加的示例代码和博览会小吃链接。

https://snack.expo.io/@vishal7008/searching-list

import * as React from 'react';
import {
  Text,
  View,
  FlatList,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';

// or any pure javascript modules available in npm

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHideList: true,
      searchText: '',
      listData: [
        {name: 'Bread'},
        {name: 'Cookies'},
        {name: 'Biscuit'},
        {name: 'Chocolate'},
      ],
      localData: [
        {name: 'Bread'},
        {name: 'Cookies'},
        {name: 'Biscuit'},
        {name: 'Chocolate'},
      ],
    };
  }

  selectOnClick = () => {
    this.setState({isHideList:false})
  };
  _renderListView = ({item, index}) => {
    return (
      <View style={styles.listItemView}>
        <TouchableOpacity onPress={() => this.selectOnClick()}>
          <Text allowFontScaling={false} style={styles.listText}>
            {item.name}
          </Text>
        </TouchableOpacity>
      </View>
    );
  };
  _searchFoodItem = value => {
    const newData = this.state.localData.filter(function(item) {
      let itemData = item.name.toUpperCase();
      let textData = value.toUpperCase();
      return itemData.startsWith(textData);
    });
    if (value == '') {
      this.setState({
        isHideList: false,
      });
    } else {
      this.setState({
        isHideList: true,
      });
    }
    this.setState({
      listData: [...newData],
    });
  };

  render() {
    return (
      <View>
        <View style={styles.selectedTagsContainer}>
          <TextInput
            style={styles.searchInput}
            placeholderTextColor="#9B6B6B"
            placeholder="Select 3 tags"
            onChangeText={text => {
              this._searchFoodItem(text);
            }}
          />
        </View>
        {this.state.isHideList && (
          <View style={styles.listStyle}>
            <FlatList
              nestedScrollEnabled={true}
              data={this.state.listData}
              keyExtractor={(item, index) => index.toString()}
              renderItem={(item, index) =>
                this._renderListView(item, index)
              }
              bounces={false}
              keyboardShouldPersistTaps="handled"
              alwaysBounceVertical={false}
            />
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  listStyle: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    borderRadius: 2,
    position: 'absolute',
    width: '60%',
    zIndex: 1,
    marginLeft: 25,
    marginTop: 104,
    maxHeight:150,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  selectedTagsContainer: {
    flexDirection: 'column',
    flexWrap: 'wrap',
    marginLeft: 20,
    marginRight: 20,
    marginTop: 50,
    backgroundColor: '#F3F3F3',
    borderRadius: 10,
    alignItems: 'center',
  },
  listText: {
    padding: 10,
    width: '100%',
    color: 'black',
    marginTop: 7,
  },
  listItemView: {
    flex: 1,
    paddingLeft: 10,
  },
  searchInput: {
    width: '100%',
    height: 50,
    paddingHorizontal: 20,
    color: '#6B6B6B',
    fontSize: 10,
  },
});

Answer 3

您可以使用门户网站将自动完成视图移至根组件。要在react native上使用门户网站，您需要安装<div class="card-body" align='center'> <div class="card-body p-0"> <table class="table table-condensed"> <thead align="center"> <tr class="satu"> <th style="width: 3%">#</th> <th style="width: 10%">Nama Unit</th> <th style="width: 15%">Tanggal Aduan</th> <th style="width: 8%">Nama Pengadu</th> <th style="width: 8%">Tujuan Aduan</th> <th style="width: 30%">Isi Aduan </th> {{-- <th>Label</th> --}} <th style="width: 5%">Status</th> <th style="width: 5%">Action</th> </tr> </thead> <tbody> @php $no=0; @endphp @foreach ($belum_dikerjakan as $i) <tr> <td> {{++$no}} </td> <td> {{$i->users->nama_unit}}</td> <td> {{$i->created_at}} </td> <td> {{$i->nama_pengadu}} </td> <td> {{$i->ipsrs->nama_bagian}} </td> <td> {{$i->aduan}}</td> <td><span class="badge bg-danger"> Belum Dikerjakan</span></td> <td><button type="button" class="btn btn-default" data-toggle="modal" data-id="{{$i->id}}" data-target="#modal-lg" > // modals button Action </button></td> </tr> @endforeach </tbody> </table> </div> </div> <div class="modal fade" id="modal-lg"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> Change Status </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> {{-- Here this Form --}} {{-- {{$aduan->nama_pengadu}} --}} // this Line is failur </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div>  </div>  </div>软件包。我已将您在snack上的代码修改为包含react-native-portal

React Native Android-为什么无法与父组件边界之外的绝对定位视图进行交互？

3 个答案: