我可以在react native中的文本输入中以下拉列表的形式显示下面的静态消息吗



我需要在输入时显示一条静态消息,或者如果用户专注于react native中的TextInput。

我需要显示输入字段必须包含以下字母。

我如何以浮动的方式在框下显示这一点,而不是在react native 中的屏幕视图内

<TextInput>
underlineColorAndroid="transparent"
secureTextEntry={this.state.passwordDisplayed}
textContentType="password"
onChangeText={text => this.setState({ password: text })}
bluronSubmit={true}
placeholderTextColor={'grey'}
placeholder={'Password'}
</TextInput>
React Native的TextInput没有显示任意消息的道具,但您可以通过创建一个既有文本输入又有消息的自定义组件来实现这一点,并通过观察文本输入焦点来控制何时显示消息。

要将消息显示为"浮动"在输入边界之外,请将其定位为"绝对",并添加与输入高度相等的上边距。您可以使用onLayout回调读取输入的大小:

const TextInputWithMessage = ({ message, ...textInputProps }) => {
const [showMessage, setShowMessage] = useState(false);
const [inputHeight, setInputHeight] = useState(0);
return (
<View onLayout={({ nativeEvent }) => setInputHeight(nativeEvent.layout.height)}>
<TextInput 
{...textInputProps}
onFocus={() => setShowMessage(true)}
onBlur={() => setShowMessage(false)}
/>
{showMessage && <Text style={{ ...StyleSheet.absoluteFillObject, top: inputHeight }}>{message}</Text>}
<View>
)
}

请注意,这将覆盖您在textInputProps中传递的任何onFocusonBlur回调。如果你需要一些自定义行为,你可以这样保存:

onFocus={e => {
setShowMessage(true);
if (textInputProps.onFocus) textInputProps.onFocus(e);
}}

为简洁起见省略。

最新更新