如何在占位符文本上启动光标位置中心反应原生？

Posted 2023-04-18

【中文标题】如何在占位符文本上启动光标位置中心反应原生？

【英文标题】：How to initiate cursor position center over placeholder text react native?

【发布时间】：2021-06-23 01:24:53

【问题描述】：

我的 textinput 光标最初在占位符文本的开头闪烁。如果我删除占位符文本，它会在正确的位置闪烁[基于 textAlignment]。如何使用占位符文本和文本对齐中心使光标初始位置居中。

光标位置应该是这样的：

我的输出：

代码：

<TextInput
    selectionColor='#1688EA'
    placeholder="Enter email here"
    keyboardType="email-address"
    autoCapitalize='none'
    autoCompleteType='email'
    autoCorrect=true
    textAlign="center"
    secureTextEntry=true
    placeholderTextColor=this.state.hasFocus ? "#C6C6C6" : "#959595"
    onFocus=this.setFocus.bind(this, true)
    onBlur=this.setFocus.bind(this, false)
    numberOfLines=1
    style=
        color: "#010101", flex: 1,
        height: 48,
        alignContent: "center",
        fontSize: 17,
        paddingLeft: 28,
        fontFamily: Fonts.GilroySemiBold,
        textAlignVertical: 'center'
    
    onChangeText=(text) => this.setEmailText(text)
    value=this.state.email
    ref=(ref) =>  this.email_entry = ref 
/>

【参考方案1】：

不确定TextInput 是否支持。您必须自己制作一个自定义占位符。这个想法是在用户输入内容时删除占位符 <Text> 元素。

export default function App() 
  const [text, setText] = React.useState('');
  return (
    <View style=styles.screen>
      <View>
        /* This is a placeholder, it is positioned behind the actual text input */
        /* It is rendered conditionally */
        text.length === 0 && (
           <Text style=styles.placeholder>
             Enter your email here
           </Text>
        )

        /* The actual text input */
        <TextInput />
      </View>
    </View>
  );


const styles = StyleSheet.create(
  screen: 
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  ,
  textInput: 
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  ,
  placeholder:  ...StyleSheet.absoluteFillObject, textAlign: 'center' ,
);

这是一种带有概念验证的世博小吃：

https://snack.expo.io/@ivanmoskalev/custom-textinput-placeholder