@uiw/react-native/lib/SearchInputBar/index.js

UIW for React Native

import React from 'react';
import { View, StyleSheet, TouchableOpacity, TextInput, Text } from 'react-native';
import Icon from '../Icon';
import Loader from '../Loader';
import { colors } from '../utils';
export default class SearchInputBar extends React.Component {
  inputRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      showIcon: false
    };
  }

  needFocus = type => {
    if (type === 'close') {
      this.props.onClear?.();
    } else if (type === 'search' && this.props.value) {
      this.props.onSearch?.();
      return;
    }

    if (type === 'actived') {
      this.setState({
        showIcon: true
      });
    }

    this.inputRef.current && this.inputRef.current.focus();
  }; // 右侧搜索

  renderSearch = () => {
    const {
      showActionButton,
      searchRender,
      touchProps,
      actionName = '搜索',
      loading
    } = this.props;
    const {
      showIcon
    } = this.state;

    if (showActionButton || showIcon) {
      return searchRender ? searchRender : <TouchableOpacity {...touchProps} style={[styles.search, {
        paddingHorizontal: 10
      }]}>
          <Text>{actionName}</Text>
        </TouchableOpacity>;
    }

    return null;
  };

  render() {
    const {
      value,
      onChangeText,
      showActionButton,
      inputStyle,
      containerStyle,
      searchIcon,
      closeIcon,
      loading,
      ...other
    } = this.props;
    return <Loader loading={loading ? loading : false} rounded={5} maskColor="transparent">
        <View style={[styles.centerFlex]}>
          <View style={StyleSheet.flatten([styles.searchContainer, styles.centerFlex, containerStyle])}>
            <TouchableOpacity style={{}} onPress={() => this.needFocus('search')}>
              <Icon name="search" size={14} color={colors.colorsPalette.grey40} height={'100%'} {...searchIcon} />
            </TouchableOpacity>
            <TextInput {...other} value={value} onChangeText={onChangeText} ref={this.inputRef} style={[styles.textInput, inputStyle]} onFocus={e => {
            if (showActionButton !== null) {
              this.setState({
                showIcon: true
              });
            }

            other?.onFocus?.(e);
          }} onBlur={e => {
            if (showActionButton !== null && !value) {
              this.setState({
                showIcon: false
              });
            }

            other?.onBlur?.(e);
          }} />
            {Boolean(value) && <TouchableOpacity style={{}} onPress={() => this.needFocus('close')}>
                <Icon name="close" size={14} color={colors.colorsPalette.grey40} height={'100%'} {...closeIcon} />
              </TouchableOpacity>}
          </View>
          {this.renderSearch()}
        </View>
      </Loader>;
  }

}
const styles = StyleSheet.create({
  centerFlex: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center'
  },
  searchContainer: {
    height: 40,
    borderRadius: 5,
    flex: 1,
    paddingHorizontal: 15,
    backgroundColor: colors.colorsPalette.grey70
  },
  textInput: {
    paddingVertical: 0,
    height: '100%',
    flex: 1,
    fontSize: 14,
    fontWeight: '400',
    paddingLeft: 10,
    color: colors.colorsPalette.grey40
  },
  search: {
    justifyContent: 'center',
    borderWidth: 0
  }
});