Javascript 如何在占位符文本上启动光标位置中心？

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

光标位置应如下所示：

我的输出：

代码：

this.setEmailText（text）}
值={this.state.email}
ref={（ref）=>{this.email_entry=ref}
/>

不确定

TextInput

是否支持它。您必须自己制作一个自定义占位符。这样做的目的是在用户输入内容时删除占位符

元素

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' },
});

导出默认函数App（）{
const[text，setText]=React.useState（“”）；
返回(
{/*这是一个占位符，它位于实际文本输入的后面*/}
{/*它是有条件地呈现的*/}
{text.length==0&&(
在此处输入您的电子邮件
)}
{/*实际文本输入*/}
);
}
const styles=StyleSheet.create({
屏幕：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
填充：8，
},
文本输入：{
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
占位符：{…StyleSheet.absoluteFillObject，textAlign:'center'}，
});

这是一款具有概念证明的世博会小吃：

---

谢谢你的建议。它起作用了。

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' },
});