标签: react-native-textinput

在中输入文本后，TextInput 我想知道 中当前的行数TextInput。或者当前的数量strings也是可以的。

我已经尝试过了string.split('\n').length，但是此代码没有检测到当文本大于屏幕时该行会自动递增。

如何获取行数

当我使用函数Swift 实现此功能时string.enumerateLines。

你们有类似的功能吗？

React Native 0.59.9，设备运行 iOS 11，并启用智能标点符号。此 iOS 功能会自动将输入的文本转换为更美观的符号。

例子：

• 双连字符--自动转换为 emdash —(unicode 8212)
• 引号"被自动转换为卷曲引号“(unicode 8220)

等等。

不幸的是，禁用智能标点符号（通过设置 > 通用 > 键盘）不是一个选项。

我TextInput几乎完全按照RN docs渲染了一个基本组件，唯一的例外是我使用自己的onChangeText处理程序函数来查看对输入文本的影响：

import React, { Component } from 'react';
import { TextInput } from 'react-native';


function handleTextChange(value) {
  // check value here after entering a '-' in the rendered TextInput.
  // when initial value is set to '', received value is ascii 45
  // when initial value …

我如何隐藏这张图片...感谢您的帮助！

我对 React Native 还很陌生，到目前为止我的大部分测试都是在 iOS 模拟器中进行的。现在我正在解决 Android 模拟器外观上的小问题。我正在努力解决应用程序聊天部分中的一个无法解决的特定问题。

我有一个TextInput组件包裹在一个KeyboardAvoidingView组件中，因此它始终漂浮在键盘上方。TextInput 应该增长到最多 5 行，类似于其他应用程序中的其他聊天。这一切在 iOS 模拟器中运行得很好，但在 Android 模拟器中，它TextInput有一个我无法控制或操作的初始高度或填充。

这是我的代码 - 我已经“拼出了”最相关的样式，所以你可以看到发生了什么。

<View style={mainStyles.background}>
                <SafeAreaView style={{ flex: 1,  }} forceInset={{ top: 'never' }}>
                    <View style={{flexDirection: 'column', flex: 1,}}>
                        <View style={{height: 80}}>
                            <View style={mainStyles.safeHeader}>
                                <TouchableOpacity activeOpacity={1.0} style={{ width: 36, height: 36, backgroundColor: '#fff', marginTop: 8, borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} onPress={() => this.props.navigation.pop()}>
                                    <Icon name='ios-arrow-back' size={26} color='#2D2C31'  />
                                </TouchableOpacity>

                                <Text style={mainStyles.screenTitle}>{this.state.title}</Text>

                                <TouchableOpacity activeOpacity={1.0} style={{ width: 36, height: …

我花了两天时间解决这个问题，问题是：

当我将 TextInput 放入 Flatlist 中时，TextInput 的行为发生了变化，键盘在写入每个字符后失去焦点。

版本React-native：0.63.2，react：16.13.1，react-dom：16.13.1，expo：~42.0.1，

重现步骤

• 我创建了一个名为 ==> [inputSearch, setInputSearch] 的状态变量
• 我在 Flatlist 的 ListHeaderComponent 中编写了一个文本输入

---> 问题是：在键盘中按下每个字符后，键盘隐藏

国家声明：

const [inputSearch, setInputSearch] = useState(null);

TextInput 位于 Flatlist 内：

    <View style={styles.container}>
    <StatusBar
         backgroundColor="#11131B"
         barStyle="light-content"
    />

    <View style={{width: '100%', flex: 1 , backgroundColor: 'white', marginTop: 5}}>

        <FlatList 
            contentContainerStyle={{alignItems: 'center',paddingHorizontal: 20}}
            keyExtractor={(item) => (Object.keys(item).length === 0) ? "" : item.id.toString()}
            width= {width}
            numColumns={2}
            ListHeaderComponent={() =>
                <View  style={{flexDirection:'column',justifyContent:'space-between'}}>

                   <Text style={{color:Colors.dark1, fontSize:14, marginBottom: 5}}>Search :</Text>
                   <TextInput style={styles.input} value={inputSearch} onChangeText={setInputSearch} placeholder="Username"/>

                </View> …

我在强制聚焦本机 TextInput 字段时遇到了麻烦。当页面加载autofocus={true}.

但是在模糊之后，我需要按下文本输入字段，但由于设计原因，这是隐藏的。有没有办法document.getElementById("myText").focus();反应原生，我可以在之后调用onBlur()？

干杯。

我的应用程序中有一个文本输入，用作搜索栏，我知道 Android 有一个 API 来显示搜索类型键盘，我想知道如何在 react-native 中使用它。

我查看了 react-native 文本输入文档，但没有找到适用于 Android 中该类型键盘的任何内容。

任何人都知道我可以在文本输入中使用哪种类型的键盘来获得想要的结果？

我的 React Native 表单上有几个字段，我希望每次用户使用虚拟键盘验证该字段时，焦点都会从一个字段跳到下一个字段。

我想出了这样的东西：

        <NamedTextInput
          name={'email'}
          ref={emailRef}
          ...
          onSubmitEditing={() => passwordRef.current.focus()}
        />
        
        <NamedTextInput
          name={'password'}
          ref={passwordRef}
          ...
        />

目前我收到一个 TypeScript 错误：

(property) React.MutableRefObject<null>.current: null
Object is possibly 'null'.ts(2531)

我尝试添加！和 ？标记但它结束为：

Property 'focus' does not exist on type 'never'.ts(2339)

有办法解决这个问题吗？

谢谢

我试试这个

  <Input placeholder="search...."
         ref={(ref) => { this.SearchInput = ref; }}
         />
  <Button transparent onPress={this.clear}>
      <Ionicons name="ios-close" />
  </Button>

和功能：

  clear = () => {
    this.SearchInput.clear();
  }

我收到此错误：

this.SearchInput.clear() 不是函数

我有一个带有圆角的 TextInput ：

<TextInput
    style={{
        backgroundColor : '#FFFFFF',
        borderRadius : 30,
        marginLeft : 8,
        marginRight : 8,
        marginTop : 10
    }}
    placeholder = 'A placeholder'
/>

但我想为占位符（以及将包含在 TextInput 中的文本）提供一些左侧填充，因为现在文本太靠近左侧 TextInput 边框。我该怎么做？

我在自定义组件中访问 onChangeText 时遇到问题。这是我的组件的代码：

import React from 'react';
import {TextInput, StyleSheet} from 'react-native';

type Props=
{
   style:any
   
}

const Input = (props:Props) =>
{
    return <TextInput {...props} style = {{...styles.input, ...props.style}} blurOnSubmit autoCorrect = {false} keyboardType = "number-pad" maxLength = {2} />
}

const styles = StyleSheet.create({
    
    input:{
        height:30,
        borderBottomColor: 'grey',
        borderBottomWidth: 1,
        marginVertical: 10
    }
        

})

export default Input;`

这是我正在使用的另一个文件中的代码部分：

 <Input style = {styles.input} onChangeText = {numberInputHandler} value = {enteredValue} />

OnChangeText 有下划线，错误是类型“IntrinsicAttributes & Props”上不存在属性“onChangeText”。我在教程中看到，在我的自定义组件中输入 {...props} 后，可以访问它的 props，但是家伙在 js 中编写，而我在 …