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

UIW for React Native

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';
import Icon from '../Icon';
import Loader from '../Loader';
import Text from '../Typography/Text';
import { useTheme } from '@shopify/restyle';
const SearchInputBar = props => {
  const inputRef = React.createRef();
  const theme = useTheme();
  const [state, setState] = useState({
    showIcon: false
  });
  const needFocus = type => {
    if (type === 'close') {
      props.onClear?.();
    } else if (type === 'search') {
      props.onSearch?.();
      return;
    }
    if (type === 'actived') {
      setState({
        showIcon: true
      });
    }
    inputRef.current && inputRef.current.focus();
  };

  // 右侧搜索
  const renderSearch = () => {
    const {
      showActionButton,
      searchRender,
      touchProps,
      actionName = '搜索'
    } = props;
    const {
      showIcon
    } = state;
    if (showActionButton || showIcon) {
      return searchRender ? searchRender : <TouchableOpacity {...touchProps} style={[styles.search, {
        paddingHorizontal: 10
      }]}>
          <Text color="primary_background">{actionName}</Text>
        </TouchableOpacity>;
    }
    return null;
  };
  const {
    value,
    onChangeText,
    showActionButton,
    inputStyle,
    containerStyle,
    searchIcon,
    closeIcon,
    loading = false,
    ...other
  } = props;
  return <Loader loading={loading} rounded={5} maskColor="transparent">
      <View style={[styles.centerFlex]}>
        <View style={StyleSheet.flatten([{
        backgroundColor: theme.colors.mask || '#fff'
      }, styles.searchContainer, styles.centerFlex, containerStyle])}>
          <TouchableOpacity onPress={() => needFocus('search')}>
            <Icon name="search" size={14} color={theme.colors.text} height={'100%'} {...searchIcon} />
          </TouchableOpacity>
          <TextInput {...other} value={value} onChangeText={onChangeText} ref={inputRef} style={[{
          color: theme.colors.primary_text || '#A6ACB1'
        }, styles.textInput, inputStyle]} onFocus={e => {
          if (showActionButton !== null) {
            setState({
              showIcon: true
            });
          }
          other?.onFocus?.(e);
        }} onBlur={e => {
          if (showActionButton !== null && !value && !loading) {
            setState({
              showIcon: false
            });
          }
          other?.onBlur?.(e);
        }} />
          {Boolean(value) && <TouchableOpacity style={{}} onPress={() => needFocus('close')}>
              <Icon name="close" size={14} color={theme.colors.primary_text || '#A6ACB1'} height={'100%'} {...closeIcon} />
            </TouchableOpacity>}
        </View>
        {renderSearch()}
      </View>
    </Loader>;
};
export default SearchInputBar;
const styles = StyleSheet.create({
  centerFlex: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center'
  },
  searchContainer: {
    height: 40,
    borderRadius: 5,
    flex: 1,
    paddingHorizontal: 15
  },
  textInput: {
    paddingVertical: 0,
    height: '100%',
    flex: 1,
    fontSize: 14,
    fontWeight: '400',
    paddingLeft: 10
  },
  search: {
    justifyContent: 'center',
    borderWidth: 0
  }
});