Question

我的搜索栏更新了onchangetext的搜索状态，该状态正在传递给嵌套的组件，以在单独的CardComponent文档中使用。 Console.log显示状态已成功传递，但是我对如何使搜索状态指示要显示阵列中的哪些图像不知所措。.我正在尝试使搜索适用于索引，因为那是当前的与图像相关的唯一可搜索的东西。

下面的代码在AppTabNavigator文件夹中，该文件夹在Components文件夹中。

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import CardComponent from '../CardComponent';
import { SearchBar } from 'react-native-elements';

class HomeTab extends Component {
  static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-search" style={{ color: tintColor }} />
    )
  };

  state = {
    search: ''
  };
  updateSearch = search => {
    this.setState({ search });
    console.warn(search);
  };

  render() {
    const { search } = this.state;

    return (
      <Container style={styles.container}>
        <SearchBar
          containerStyle={{ backgroundColor: 'transparent' }}
          // inputStyle={{ backgroundColor: 'grey' }}
          placeholder="Filter for..."
          placeholderTextColor="white"
          onChangeText={this.updateSearch}
          value={search}
        />
        <Content>
          <CardComponent search={this.state.search} />
        </Content>
      </Container>
    );
  }
}
export default HomeTab;

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

下面的代码是CardComponent，它与AppTabNavigator位于同一文件夹（上一个代码位于上一个文件夹）。

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

var images = [
  require('../assets/IMG-0028.jpeg'),
  require('../assets/IMG-0048.jpeg'),
  require('../assets/IMG-0064.jpeg'),
  require('../assets/IMG-0089.jpeg'),
  require('../assets/IMG-0119.jpeg'),
  require('../assets/IMG-0151.jpeg'),
  require('../assets/IMG-0152.jpeg'),
  require('../assets/IMG-0153.jpeg'),
  require('../assets/IMG-0154.jpeg'),
  require('../assets/IMG-0155.jpeg'),
  require('../assets/IMG-0184.jpeg'),
  require('../assets/IMG-0221.jpeg'),
  require('../assets/IMG-0268.jpeg'),
  require('../assets/IMG-0309.jpeg'),
  require('../assets/IMG-0320.jpeg'),
  require('../assets/IMG-0474.jpeg'),
  require('../assets/IMG-0707.jpeg'),
  require('../assets/IMG-0860.jpeg')
];
var { width, height } = Dimensions.get('window');

class CardComponent extends Component {
  renderHome = () => {
    console.warn(this.props.search);
    return images.map((image, index) => {
      return (
        <TouchableOpacity onPress={() => console.warn(index)} key={index}>
          <View
            key={index}
            style={[
              { width: width / 3 },
              { height: height / 3 },
              { marginBottom: 2 },
              index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
            ]}
          >
            <Image
              style={{ flex: 1, width: undefined, height: undefined }}
              source={image}
            />
          </View>
        </TouchableOpacity>
      );
    });
  };
  render() {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {this.renderHome.bind(this)()}
      </View>
    );
  }
}
export default CardComponent;

如何根据搜索状态过滤显示的图像？

0 个答案: