safeareaview 相关问题


React Native 的投票系统功能

我正在尝试创建一个投票页面,点击其中一个选项应将其计数增加 1。 这是我到目前为止所拥有的: 导入 { FlatList、SafeAreaView、StyleSheet、Text、


如何在本机反应中强制 TextInput 增长而 multiline={false} ?

<TextInput ref={inputRef} value={text} style={styles.textInput} returnKeyType="next" placeholder={"placeholder"} scrollEnabled={false} blurOnSubmit={false} onFocus={onFocusInput} textAlignVertical="center" onContentSizeChange={onChangeContentSizeChange} onChangeText={onInputChangeValue} onBlur={onInputBlur} onKeyPress={onInputKeyPress} onSubmitEditing={() => NextScript(id)} multiline={false} numberOfLines={5} /> 逻辑是我想要 onSubmitEditing 带我到下一个 TextInput 字段,并且我需要文本来包装输入的多个文本。如果我启用 multiline,一旦按下回车键,它会在进入下一个输入之前进入下一行,这就是我试图避免的。 是否可以用onSubmitEditing完全取代回车键?每当我按下回车键时,它都会尝试在移动到下一个TextInput之前输入换行符,因此它会创建一个糟糕的用户界面,其中文本在重新定位然后进入下一行之前会稍微向上移动。 如果我将 blurOnSubmit 设置为 true,它会停止,但键盘会在提交时关闭。 如果我将 multiline 设置为 false,它会停止但不会换行。 我创建了一个示例,onKeyPress将允许您在按下回车键时聚焦下一个文本字段。 import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native'; export default function App() { return ( <SafeAreaView style={styles.container}> <TextInput multiline={true} placeholder={'PLACEHOLDER'} onKeyPress={(e) => { if (e.nativeEvent.key == 'Enter') { console.log('ENTER'); //focusNextTextField(); } }} style={{ borderColor: '#000000', borderWidth: 1 }} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignContent: 'center', padding: 8, }, }); 我也面临同样的问题。后来我找到了解决办法。 自定义文本输入处理:您需要一个自定义逻辑来处理文本输入及其在按“Enter”键时的行为。您将以编程方式控制文本换行和导航到下一个输入字段,而不是依赖多行的默认行为。 用 onSubmitEditing 替换 Enter 键:要覆盖“Enter”键的默认行为,您可以使用 onKeyPress 事件。检测何时按下“Enter”键并以编程方式触发 onSubmitEditing 函数。 维护文本换行:由于 multiline={false} 禁用自动文本换行,因此您需要实现一种方法来根据输入的内容大小或字符数手动处理文本换行。 以下是如何实现这一点的概念示例: import React, { useState, useRef } from 'react'; import { TextInput, StyleSheet } from 'react-native'; const CustomTextInput = () => { const [text, setText] = useState(''); const nextInputRef = useRef(null); const onInputKeyPress = (e) => { if (e.nativeEvent.key === 'Enter') { // Replace the Enter key functionality // Call the function you would have in onSubmitEditing handleEnterKeyPress(); } }; const handleEnterKeyPress = () => { // Logic to navigate to next TextInput // Focus the next input field if (nextInputRef.current) { nextInputRef.current.focus(); } // Additional logic if needed to handle text wrapping }; return ( <TextInput value={text} style={styles.textInput} onChangeText={setText} onKeyPress={onInputKeyPress} blurOnSubmit={false} // prevent keyboard from closing // other props /> ); }; const styles = StyleSheet.create({ textInput: { // styling for your text input }, }); export default CustomTextInput;


© www.soinside.com 2019 - 2024. All rights reserved.