触摸父视图时如何使键盘显示

发布于 2025-01-21 07:02:01 字数 566 浏览 2 评论 0原文

我正在创建一个具有React Native＆amp;的应用程序。博览会。其中一个搜索输入包括一个图标，所以我这样做是这样做的：

        <View style={styles.inputContainer}>
            <FontAwesome name="search" size={20} color="black" />
            <TextInput
                style={styles.input}
                value={search}
                placeholder="Pesquise"
                placeholderTextColor={text_gray}
                onChangeText={(text) => setSearch(text)}
            />
        </View>

但是，键盘仅在单击TextInput时才显示，并且我需要在单击包装它和图标的视图的任何地方打开它。我该如何实现？

原文

I'm creating an app with React Native & Expo.
One of the search inputs includes an icon, so I did it like so:

        <View style={styles.inputContainer}>
            <FontAwesome name="search" size={20} color="black" />
            <TextInput
                style={styles.input}
                value={search}
                placeholder="Pesquise"
                placeholderTextColor={text_gray}
                onChangeText={(text) => setSearch(text)}
            />
        </View>

But the Keyboard shows only when I click the TextInput, and I need to open it wherever I click the View that wraps it and the icon.
How can I achieve that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫瑟鸿黎 2025-01-28 07:02:01

创建对文本输入的参考，然后致电Ref.Current.focus（）专注于textInput和ref.current.blur（）以模糊它。使用可压制的而不是视图，就像视图一样，但有不同的OnPress事件。

const textInput = useRef(null);

return (
  <Pressable style={styles.inputContainer} onPress={() => textInput?.current?.focus()}>
    <FontAwesome name="search" size={20} color="black" />
    <TextInput
      ref={textInput}
      style={styles.input}
      value={search}
      placeholder="Pesquise"
      placeholderTextColor={text_gray}
      onChangeText={(text) => setSearch(text)}
    />
  </Pressable>
)

Create a ref to the TextInput and then call REF.current.focus() to focus on the textInput and REF.current.blur() to blur it. Use Pressable instead of View, its just like a View but with different onPress events.

const textInput = useRef(null);

return (
  <Pressable style={styles.inputContainer} onPress={() => textInput?.current?.focus()}>
    <FontAwesome name="search" size={20} color="black" />
    <TextInput
      ref={textInput}
      style={styles.input}
      value={search}
      placeholder="Pesquise"
      placeholderTextColor={text_gray}
      onChangeText={(text) => setSearch(text)}
    />
  </Pressable>
)

回复收藏 0 原文

~没有更多了~