当单击TextInput React本机时，保持键盘打开

发布于 2025-02-03 00:31:09 字数 428 浏览 4 评论 0原文

我在键盘上有问题，当我单击按钮显示密码时，文本输入变得模糊，然后隐藏键盘。当按钮点击时，我想保持键盘打开。我发现了一个解决方法，它与iOS效果很好，但与Android不起作用？这是公共问题吗？我应该怎么办？

<View>
    <TextInput ref={inputRef} secureTextEntry={secure} style={styles.input} {...rest} />
      <TouchableWrapper style={styles.secureTextWrapper} onPress={_handleSecureTextEntryChange}>
       secure ? 'show' : 'hide'
      </TouchableWrapper>
</View>

原文

I have problem with keyboard, when i click the button to show password the TextInput get blur, and hide the keyboard.
i want to keep keyboard open when the button clicks.
i have found a workaround it works well with ios but doesn't work with android? is it a public problem?
what should i do?

<View>
    <TextInput ref={inputRef} secureTextEntry={secure} style={styles.input} {...rest} />
      <TouchableWrapper style={styles.secureTextWrapper} onPress={_handleSecureTextEntryChange}>
       secure ? 'show' : 'hide'
      </TouchableWrapper>
</View>

分享到QQ

分享到微博

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

发布评论

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

白鸥掠海 2025-02-10 00:31:09

这就是我完成密码输入的方式，我创建了一个用某些边界代表TextInput的容器。在容器内部一个标题和密码范围。

passwassContainer：

textInput
touchableopacity with icons> onsecurePress

<SafeAreaView style={styles.inputContainer}>
  <Text style={styles.titleInput}>{title}</Text>
  <View style={styles.textContainer}>
    <Ionicons name={iconLeft} size={22} color="#1F2341" />
    <TextInput
      style={styles.textInput}
      placeholder={placeholder}
      onChangeText={propertyChange}
      placeholderTextColor="#3f4783"
      secureTextEntry={secureText}
      enablesReturnKeyAutomatically
      value={value}
    />
    <TouchableOpacity onPress={onSecurePress}>
      <Ionicons name={iconRight} size={22} color="rgba(31, 35, 65, 0.7)" />
    </TouchableOpacity>
  </View>
</SafeAreaView>;

onsecurePress：

onSecurePress={() => setSecureText(!secureText)}

style： style：style：style：

const styles = StyleSheet.create({
  inputContainer: { marginBottom: 15 },
  textContainer: {
    backgroundColor: "rgba(255,255,255,0.8)",

    alignItems: "center",
    flexDirection: "row",
    height: 50,
    paddingLeft: 10,

    //borderWidth: 4,
    borderRadius: 15,
    borderWidth: 0.5,
    borderColor: "rgba(0,0,0,0.2)",

    marginHorizontal: 20,
    marginVertical: 5,

    shadowOffset: { height: 2, width: 2 },
    shadowColor: "black",
    shadowOpacity: 0.1,
  },

  titleInput: {
    marginHorizontal: 20,
    marginVertical: 5,
    paddingLeft: 10,
    color: "#6E6E6E",
  },
  textInput: {
    width: "80%",
    padding: 10,
  },
  errorContainer: { marginLeft: "10%" },
  errorMessage: {
    color: "#e74d3c",
    fontFamily: "MontserratItalic",
  },
});

This is how I did my password input, I created a container representing the TextInput with some borders. Inside the container a title and passwordContainer.

passwordContainer:

TextInput
TouchableOpacity with the icons

<SafeAreaView style={styles.inputContainer}>
  <Text style={styles.titleInput}>{title}</Text>
  <View style={styles.textContainer}>
    <Ionicons name={iconLeft} size={22} color="#1F2341" />
    <TextInput
      style={styles.textInput}
      placeholder={placeholder}
      onChangeText={propertyChange}
      placeholderTextColor="#3f4783"
      secureTextEntry={secureText}
      enablesReturnKeyAutomatically
      value={value}
    />
    <TouchableOpacity onPress={onSecurePress}>
      <Ionicons name={iconRight} size={22} color="rgba(31, 35, 65, 0.7)" />
    </TouchableOpacity>
  </View>
</SafeAreaView>;

onSecurePress:

onSecurePress={() => setSecureText(!secureText)}

style:

const styles = StyleSheet.create({
  inputContainer: { marginBottom: 15 },
  textContainer: {
    backgroundColor: "rgba(255,255,255,0.8)",

    alignItems: "center",
    flexDirection: "row",
    height: 50,
    paddingLeft: 10,

    //borderWidth: 4,
    borderRadius: 15,
    borderWidth: 0.5,
    borderColor: "rgba(0,0,0,0.2)",

    marginHorizontal: 20,
    marginVertical: 5,

    shadowOffset: { height: 2, width: 2 },
    shadowColor: "black",
    shadowOpacity: 0.1,
  },

  titleInput: {
    marginHorizontal: 20,
    marginVertical: 5,
    paddingLeft: 10,
    color: "#6E6E6E",
  },
  textInput: {
    width: "80%",
    padding: 10,
  },
  errorContainer: { marginLeft: "10%" },
  errorMessage: {
    color: "#e74d3c",
    fontFamily: "MontserratItalic",
  },
});

回复收藏 0 原文

~没有更多了~