单击搜索图标后如何打开键盘？（本机反应）

Question

我使用 TextInput 创建了一个动画搜索栏。我只是想知道如何在单击搜索图标时打开键盘以及在单击取消图标时关闭键盘。我使用 google 帮助尝试了一些要点，但不值得。请提出一些帮助。

export default function SearchBar() {
  const animation = new Animated.Value(50);
  const { width } = Dimensions.get('window');
  const keyboard = useKeyboard();

  function onSearch() {
    Animated.spring(animation, {
      toValue: width * 1,
      useNativeDriver: false,
    }).start();
  }
  function onSearchClose() {
    Animated.spring(animation, {
      toValue: width * 0.11,
      useNativeDriver: false,
    }).start();
    Keyboard.dismiss();
  }
  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
        <View style={{ marginRight: 0, justifyContent: 'center' }}>
          <TouchableWithoutFeedback>
            <Image source={require('./logo.png')} style={{ width: 30, height: 30 }} />
          </TouchableWithoutFeedback>
        </View>
        <View style={{ marginRight: 0 }}>
          <Container style={{ width: animation }}>
            <Input placeholder={'search'} style={{ marginLeft: 50, fontSize: 18 }} />
            <BoxButtonClose onPress={onSearchClose}>
              <CloseIcon />
            </BoxButtonClose>
            <BoxButtonSearch onPress={onSearch}>
              <SearchIcon />
            </BoxButtonSearch>
          </Container>
        </View>
      </View>
    </SafeAreaView>
  );
}

Answer 1

为输入字段提供一个引用（例如 inputRef）。在“onSearch”方法上，调用 inputRef().current.focus()。它将聚焦您的输入并打开键盘。

您的代码将如下所示：

export default function SearchBar() {


 const animation = new Animated.Value(50);
  const { width } = Dimensions.get('window');
  const keyboard = useKeyboard();
  const inputRef = useRef(null);

  function onSearch() {
    Animated.spring(animation, {
      toValue: width * 1,
      useNativeDriver: false,
    }).start();
    inputRef.current.focus();
  }
  function onSearchClose() {
    Animated.spring(animation, {
      toValue: width * 0.11,
      useNativeDriver: false,
    }).start();
    Keyboard.dismiss();
  }
  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
        <View style={{ marginRight: 0, justifyContent: 'center' }}>
          <TouchableWithoutFeedback>
            <Image source={require('./logo.png')} style={{ width: 30, height: 30 }} />
          </TouchableWithoutFeedback>
        </View>
        <View style={{ marginRight: 0 }}>
          <Container style={{ width: animation }}>
            <Input ref={inputRef} placeholder={'search'} style={{ marginLeft: 50, fontSize: 18 }} />
            <BoxButtonClose onPress={onSearchClose}>
              <CloseIcon />
            </BoxButtonClose>
            <BoxButtonSearch onPress={onSearch}>
              <SearchIcon />
            </BoxButtonSearch>
          </Container>
        </View>
      </View>
    </SafeAreaView>
  );
}

Answer 2

export default function SearchBar() {
  const animation = new Animated.Value(50);
  const { width } = Dimensions.get('window');
  const keyboard = useKeyboard();
  const inputRef = useRef();

  function onSearch() {
    Animated.spring(animation, {
      toValue: width * 1,
      useNativeDriver: false,
    }).start();
    inputRef.current.focus(); //Keep this for open keyboard onClick
  }

  function onSearchClose() {
    Animated.spring(animation, {
      toValue: width * 0.11,
      useNativeDriver: false,
    }).start();
    Keyboard.dismiss(); //Keep this for close keyboard onClick
    // inputRef.current?.blur();
    setText(''); //Keep this for clear text on close
  }

  const [text, setText] = useState('');

  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
        <View style={{ marginRight: 5, justifyContent: 'center' }}>
          <TouchableWithoutFeedback>
            <Image
              source={require('./logo.png')}
              style={{ width: 30, height: 30 }}
            />
          </TouchableWithoutFeedback>
        </View>
        <View style={{ marginRight: 0 }}>
          <Container style={{ width: animation }}>
            <Input
              ref={inputRef}
              placeholder={'search'}
              value={text}
              onChangeText={(value) => setText(value)}
              style={{ marginLeft: 50, fontSize: 18 }}
            />
            <BoxButtonClose onPress={onSearchClose}>
              <CloseIcon />
            </BoxButtonClose>
            <BoxButtonSearch onPress={onSearch}>
              <SearchIcon />
            </BoxButtonSearch>
          </Container>
        </View>
      </View>
    </SafeAreaView>
  );
}

单击搜索图标后如何打开键盘？（本机反应）

How to open keyboard after clicking on search icon? (react-native)

search

react-native

单击搜索图标后如何打开键盘？ （本机反应）

How to open keyboard after clicking on search icon? (react-native)

search

react-native

单击搜索图标后如何打开键盘？（本机反应）