React Native实现一个带筛选功能的搜房列表-租房不求人

最近在写RN项目中需要实现一个带筛选功能的搜房列表，写完这个功能后发现有一些新的心得，在这里写下来跟大家分享一下。 文章中的代码都来自代码传送门--NNHybrid。主要集中在SearchHousePage.js、searchHouse.js和FHTFilterMenuMana...

1. 定义"SearchHousePage"组件

首先，我们先定义一个名为"SearchHousePage"的组件，在这个组件中，我们将加载必要的数据，并设计筛选页面"FHTFilterMenuManager"。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SearchHouse from './SearchHouse';
import FHTFilterMenuManager from './FHTFilterMenuManager';

export default class SearchHousePage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FHTFilterMenuManager />
        <SearchHouse />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

2. 设计筛选页面"FHTFilterMenuManager"

接下来，我们来设计筛选页面"FHTFilterMenuManager"，在这个页面中，我们将实现筛选功能。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import FilterMenu from './FilterMenu';

export default class FHTFilterMenuManager extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FilterMenu />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

3. 编写"SearchHouse"组件

接下来，我们来编写"SearchHouse"组件，在这个组件中，我们将用于显示房屋列表并支持筛选。

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

export default class SearchHouse extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => <Text style={styles.item}>{item.name}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

4. 定义一个名为"FlatList"的组件

接下来，我们来定义一个名为"FlatList"的组件，在这个组件中，我们将实现房屋列表的展示。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default class FlatList extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.props.data.map((item) => (
          <TouchableOpacity
            key={item.id}
            onPress={() => this.props.onPress(item)}
            style={styles.item}
          >
            <Text style={styles.itemText}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemText: {
    fontSize: 18,
  },
});

5. 在"SearchHouse"组件中使用"FlatList"组件，展示房屋列表

接下来，我们来在"SearchHouse"组件中使用"FlatList"组件，展示房屋列表。

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

export default class SearchHouse extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <TouchableOpacity
              key={item.id}
              onPress={() => this.props.onPress(item)}
              style={styles.item}
            >
              <Text style={styles.itemText}>{item.name}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemText: {
    fontSize: 18,
  },
});

6. 在"FlatList"组件中使用"TouchableOpacity"组件，实现房屋详情页面的跳转

接下来，我们来在"FlatList"组件中使用"TouchableOpacity"组件，实现房屋详情页面的跳转。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default class FlatList extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.props.data.map((item) => (
          <TouchableOpacity
            key={item.id}
            onPress={() => this.props.onPress(item)}
            style={styles.item}
          >
            <Text style={styles.itemText}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemText: {
    fontSize: 18,
  },
});

7. 在"TouchableOpacity"组件中，设置"onPress"事件，跳转到房屋详情页面

接下来，我们来在"TouchableOpacity"组件中，设置"onPress"事件，跳转到房屋详情页面。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default class FlatList extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.props.data.map((item) => (
          <TouchableOpacity
            key={item.id}
            onPress={() => this.props.onPress(item)}
            style={styles.item}
          >
            <Text style={styles.itemText}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemText: {
    fontSize: 18,
  },
});

8. 最后，优化代码，提高代码质量

最后，我们来优化代码，提高代码质量。

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

export default class SearchHousePage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FHTFilterMenuManager />