时间戳

首页 > 解决方案 > 我有一个带有 positoin:absolute 的 Flatlist ，onpress 在渲染项内没有响应

css - 我有一个带有 positoin:absolute 的 Flatlist ，onpress 在渲染项内没有响应

问题描述

我在 react-native 中构建了一个自动完成功能。在此处输入图像描述

这里的问题是当我用样式位置“绝对”onpress 包装平面列表时没有响应。

 return ( <View style={styles.userNameSearchContainer}>{searchUserName()}</View>
          <View style={styles.sendInviteContainer}>{sendInvite()}</View>)

  const searchUserName = () => {
   let searchUser = (
  <KeyboardAvoidingView>
    <View>
      <Text style={styles.searhUserTitle}>Search by username</Text>
    </View>
    <View style={styles.searchUserInputWrapper}>
      <Image
        style={styles.searchIcon}
        source={require("../../../assets/Images/search.png")}
      />

      <TextInput
        style={{ flex: 1 }}
        placeholder={"@user114"}
        value={searchText}
        onChangeText={(text) => onSearchTextChanged(text)}
      />
    </View>
    <View>
      <FlatList
        style={{ position:'absolute',  width: "100%" }}
        data={filteredUsers}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  </KeyboardAvoidingView>
 );
 return searchUser;
 };

 
   const renderItem = ({ item }) => (
   <TouchableOpacity onPress={(item) => console.log(item)}>
      <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
   </TouchableOpacity> );

我尝试从手势处理程序和 touchablewithoutfeedback 导入 touchableOpacity。

标签： cssreact-nativereact-native-flatlist

解决方案

这是一个例子

零食：https ://snack.expo.io/@ashwith00/ranting-bubblegum

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const searchResult = ['data1', 'data2', 'data3', 'data4', 'data5'];
export default function App() {
  const [str, setStr] = React.useState('');
  return (
    <View style={styles.container}>
      <TextInput style={styles.input} onChangeText={(st) => setStr(st)} />
      <View style={[styles.list, ]}>
        {str.length > 0  && <FlatList
          data={searchResult}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.item}
              onPress={() => console.log(item)}>
              <Text style={styles}>{item}</Text>
            </TouchableOpacity>
          )}
        />}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight || 10,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  input: {
    alignSelf: 'stretch',
    height: 50,
    backgroundColor: 'white',
  },
  item: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    backgroundColor: 'white',
  },
  list: {
    position: 'absolute',
    top: 60,
    left: 0,
    right: 0,
    paddingHorizontal: 10,
    height: 200,
  },
});

推荐阅读