标签: react-native-textinput

我想在TextInput上应用阴影,如下所示:

我正在制作这种风格,使用阴影和海拔为android:

shadowColor: colors.shadowColor,
    shadowOpacity: 0.5,
    shadowRadius: 3,
    shadowOffset: {
      height: 0,
      width: 0,
    },
    elevation: 2,

但是,结果并不像预期的那样.所以,我问是否有办法在不通过第三方包的情况下增强它.

我目前正在 Android 上构建 React 本机移动应用程序，我意识到当输入聚焦时（用户在键盘上键入内容），单击事件不适用于其他元素。

例如，当用户在输入中键入内容时，如果用户想要单击“提交按钮”，则单击事件只会取消输入的焦点，但不会触发按钮上的单击事件。

有没有办法在输入焦点时使这两个事件发生？（取消焦点并单击都会触发的元素，就像在网页中一样）

我只发现这个主题似乎有类似的问题，但对我不起作用或者我使用错误？ 当 TextInput 获得焦点时，不会触发任何触摸事件

我的代码看起来像这样：

import React, {useState} from 'react'
import { ScrollView, TextInput, TouchableOpacity} from 'react-native'

export default function App(){

    return (

        <ScrollView
            keyboardShouldPersistTaps="always"
        >
            <TextInput
                placeholder="Here is the input to be focused"
            />
            <TouchableOpacity
                style={{
                    backgroundColor : "#03a9f4"
                }}
                onPress={()=>{
                    console.log("Click triggered !")
                }}
            >
                Submit form
            </TouchableOpacity>
        </ScrollView>

    )

}

我正在尝试在 react native 中实现多行文本输入，但是当用户键入时，文本不会被换行，而是在同一行上水平书写，

我的文本输入的代码如下

<View style={[styles.container, props.containerStyles]}>
  <TextInput 
    style={styles.placeholderStyle} 
    placeholder={"Placeholder text"}
    value={this.state.reviewBody}
    onChangeText={body => this.setState({ reviewBody: body })}
    numberOfLines={5}
    textAlignVertical={"top"}
    textBreakStrategy={"highQuality"}
    underlineColorAndroid={"transparent"}
    autoCorrect
  />
</View>

风格是，

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderWidth: 2,
    borderColor: "#f4f4f4",
    width: WIDTH - 40,
    maxWidth: WIDTH - 40,
    minWidth: WIDTH - 40,
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 5,
    marginTop: 10,
    flexWrap: "wrap",
  },
  placeholderStyle: {
    fontSize: 11,
    padding: 0,
    flex: 1,
    width: WIDTH - 40,
    maxWidth: WIDTH - 40,
    minWidth: WIDTH …

我的 React Native 应用程序中有TextInput组件，当我添加secureEntryText: 'true'密码输入时，我注意到两件事：

1）当我输入密码时，输入密码的左边缘移出输入框的左侧，如下所示：

2）当我取消密码输入焦点时，无论密码有多长，输入的密码末尾都会有一个省略号，如下所示：

有谁知道我如何解决这些问题？

某些 iOS 设备似乎在小数点上显示,（逗号）而不是 a .。我相信这与键盘语言/语言环境有关。有没有一种方法可以强制无论键盘语言/语言环境如何都decimal-pad显示.？

<TextInput
    rejectResponderTermination={false}
    style={[
        {
            fontSize: entryValueFontSize,
            height: height,
        },
        calculatorStyles.inputsShared,
        calculatorStyles.amountInput,
        theme.inputsShared,
    ]}
    autoCapitalize={'none'}
    placeholder={entryValueLabel}
    placeholderTextColor={theme.placeholderTextColor}
    keyboardType={'decimal-pad'}
    returnKeyType={'done'}
    defaultValue={''}
    value={isNaN(this.state.entryValue) ? '' : this.state.entryValue}
    onChangeText={(entryValue) => {
        this.onEntryValueChange(entryValue);
    }}
/>

问题：

期望的输出：

我有一个TextInput，secureTextEntry设置为true。当我执行以下步骤时，此输入不必要地清除其所有内容：

1. 在TextInput中输入一些内容
2. 执行任何操作来失去焦点（例如Keyboard.dismiss()）
3. 再次点击TextInput并输入内容
4. 先前输入的文本立即清除，您开始在空白字段中输入