React Native Android - 為什么無法與父組件邊界之外的絕對定位視圖進行交互？

Question

我正在嘗試實現一個自動完成輸入，當用戶開始輸入時，它在文本輸入下方有一個滾動視圖，其中包含可以按下的建議行。 該問題僅發生在 Android 上，其中具有絕對定位的文本輸入下方的組件無法按下或滾動，因為它位於父容器之外。 在這方面最好的工作是什么？ 我已經嘗試更改父容器的 zIndex 以及滾動視圖，但它仍然不起作用。

如果你們想測試，這里有一個小吃代碼網址： snack.expo.io/HkLeBYV18

這是我嘗試實現的屏幕截圖，用紅色圈出的那個不能在 Android 上按下或任何東西：

Answer 1

您可以使用門戶將自動完成視圖移動到根組件。 要在 React Native 上使用門戶，您需要安裝react-native-portal包。 我已經修改了您的零食代碼以包含react-native-portal

Answer 2

您是否願意使用自定義下拉菜單，例如

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

如果可以使用，請檢查這些庫。

Answer 3

通過將isHideScroll狀態添加到onPress偵聽Scrollview ，我已經解決了您在Scrollview中按下或滾動搜索數據的問題。 isHideScroll Flag 用於有條件地顯示和隱藏 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,
  },
});