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

【问题标题】：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 }}
/>

【问题讨论】：

标签： javascript android css react-native textinput

【解决方案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

【讨论】：