操作 TextInput 选择

Question

我正在尝试使用非标准 placeholder 制作 TextInput，因为我需要格式化，而正常的内置 TextInput placeholder 不适用于我.

为了让用户从行首开始书写，就像普通的占位符一样，我将光标设置在selection={TEXT ? null: {start: 0}的开头。当用户进一步键入时，光标返回到开头并强制用户写入 elloH 而不是 Hello.

我在Snack上做了一个例子，当运行时问题会更清楚：https://snack.expo.dev/Vv6lNzUCU

如何解决这个问题？

Answer 1

我试图以您为榜样，但无法想出您正在做的所有事情。所以我做了一个新的小吃。它不一定能回答你的问题，但那是因为你没有详细说明背后的所有原因。

它的作用是添加一个自定义占位符，以便在 TextInput 中没有文本时显示。当您添加一些文本时，占位符将消失。

由于您正在尝试显示书面内容的内容，我假设（抱歉）您正在尝试构建某种 RTE 解决方案。因此，我以您的示例为例，并添加了钩子以突出显示文本内容。因此，请为此尝试 highlightedKeywords 数组。

这里是要测试的完整解决方案：https://snack.expo.dev/@zvona/manipulation-textinput-selection

这里是防止世博会丢失零食的代码：

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

const highlightedKeywords = ['beep', 'boop'];

const App = () => {
  const [inputText, setInputText] = React.useState('');

  const highlightContent = () => {
    const splitText = inputText.split(' ');

    return splitText.map((str) => {
      if (highlightedKeywords.includes(str)) {
        return <Text style={[styles.overlapText, styles.highlightedText]}>{str}</Text>;
      } else {
        return <Text style={styles.overlapText}>{str}</Text>;
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.textInput} onChangeText={setInputText} />
        <View style={styles.placeholder}>
          {inputText.length ? (
            <><Text>{highlightContent()}</Text></>
          ) : (
            <>
              <Text>This is my </Text>
              <Text style={{ backgroundColor: 'yellow' }}>Placeholder</Text>
            </>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    padding: 20,
  },

  inputContainer: {
    position: 'relative',
    width: '100%',
    height: 35,
  },

  textInput: {
    zIndex: 2,
    borderColor: '#202020',
    borderWidth: 2,
    height: '100%',
    padding: 5,
    color: 'transparent',
  },

  placeholder: {
    zIndex: 0,
    position: 'absolute',
    display: 'block',
    height: '100%',
    left: 7,
    top: 8,
  },

  overlapText: {
    marginRight: '0.25em',
  },

  highlightedText: {
    backgroundColor: '#6699CC',
    color: '#ffffff',
  },
});

export default App;

Answer 2

我使用了 opacity 和 zIndex 的 Samuli Hakoniemi's 想法，但我认为我稍微简化了代码：

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

export default function App() {
  const [TEXT, setText] = React.useState(null);

  return (
    <View style={{ marginTop: 100, padding: 20 }}>
      <View>
        <TextInput
          style={{ 
            padding: 5,
            borderWidth: 1,
            zIndex: 1,
          }}
          autoFocus={true}
          onChangeText={(text) => {
            setText(text);
          }}
          value={TEXT}
        />

        <View style={{
          position: 'absolute',
          justifyContent: 'center',
          left: 5,
          height: '100%',
          zIndex: 0,
          opacity: (TEXT) ? 0 : 1,
        }}>
          <Text>
            <Text>My </Text>
            <Text style={{ backgroundColor: 'yellow' }}>Example</Text>
          </Text>
        </View>
      </View>
    </View>
  );
}

零食示例：https://snack.expo.dev/mOuNbvxCU

操作 TextInput 选择

Manipulation TextInput selection

reactjs

react-native

react-native-textinput