不确定如何实现搜索栏以响应本机+还原

问题描述

我正在尝试在React Native中实现搜索栏。不确定如何执行此操作，因为事件处理与react js略有不同+我正在使用Redux，这是我的新手。我希望能够搜索来自我的redux道具的平面列表中的元素。 （{item}）来具体说明。正确方向的任何指示都将有所帮助！谢谢!!!

import React from 'react';
import { StyleSheet,Text,View,FlatList,TouchableOpacity,Button,NativeEventEmitter} from 'react-native';
import {connect} from 'react-redux';
import {fetchResources} from '../actions';
import { addUserResource } from '../actions'
import {SearchBar} from 'react-native-elements';

class ResourcesScreen extends React.Component {

  componentDidMount =() =>{
    this.props.fetchResources()
  }


  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,width: "100%",backgroundColor: "lightblue",}}
      />
    );
  }



  handlePress(item) {
    fetch('http://localhost:3000/user_resources',{
          method: 'POST',headers: {
              'Content-Type': 'application/json',Accept: 'application/json'
          },body: JSON.stringify({
              resource_id: item,user_id: this.props.users.id
          })
      })
          .then(res => res.json())
          .then(data2 => {
            console.log(data2)
              this.props.addUserResource(data2)
          })
  }

  header = () => {
  return <View>
  <Text style={styles.header}>Hello,{this.props.users.name}</Text>
      </View>
  }

 
  render(){
   let filtered = this.props.resourceName.map(name => {
      if (name.topic_id === this.props.route.params.topicId)
      return name})
    let anoda = filtered.filter(x => x !== undefined)
     return(
       <>
       <SearchBar />
      <Button title="Add A New Resource" onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:this.props.route.params.topicId})} style={styles.listitem} />
      <FlatList style={styles.flatlist} keyExtractor={(item)=> item.id.toString()} data={anoda} ItemSeparatorComponent = { this.FlatListItemSeparator } renderItem={({item}) => {
      return <View><TouchableOpacity><Text onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:item.id})} style={styles.listitem}>{item.name}</Text><Button title="working?" onPress={()=>this.handlePress(item.id)}/></TouchableOpacity>
      </View>}}
      ListHeaderComponent = {this.header}/>
      </>
     )
   }
}

  const styles = StyleSheet.create({
    flatlist: {
      flex:1
    },listitem: {
      flexGrow: 0,flex:1,minHeight: 109,paddingTop: 45,textAlign: 'center',justifyContent:"center",backgroundColor:"black",fontSize: 20,color: 'white'
      },header : {
      backgroundColor: 'lightblue',padding: 20,fontWeight: 'bold'
    }
  })

  

     const mapStatetoProps = (state) => {
      return {
        resourceName: state.resourceReducer.resources,users: state.userReducer,data: state.searchReducer.data

      }
    }

    const mapdispatchToProps = (dispatch) => {
      return {
        fetchResources: () => dispatch(fetchResources()),addUserResource,}
    }


export default connect(mapStatetoProps,mapdispatchToProps)(ResourcesScreen)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）