英文:

React Native: Align text to the left but placeholder to the right

问题 {#heading}

我正在开发一个React Native应用程序，遇到了一个关于文本输入框及其占位符不同对齐的问题。我希望输入文本右对齐，同时保持占位符左对齐在同一个输入框内。我尝试使用textAlign属性，但它影响了输入文本和占位符。这是我尝试过的代码：

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

const MyComponent = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.textInput}
        value={text}
        onChangeText={setText}
        placeholder="Placeholder"
        placeholderTextColor="gray"
        textAlign="right" // This affects both input text and placeholder
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
  },
  textInput: {
    fontSize: 16,
  },
});

export default MyComponent;

如何实现我想要的效果，即将输入文本右对齐，同时保持占位符文本左对齐？

非常感谢，任何帮助将不胜感激。谢谢！ 英文:

I'm working on a React Native application and I'm facing an issue with aligning a text input and its placeholder differently. I want the input text to be aligned to the right, while keeping the placeholder aligned to the left within the same input field. I've tried using the textAlign property, but it's affecting both the input text and the placeholder. Here's the code I've tried:

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

const MyComponent = () =\> {
const \[text, setText\] = useState(\'\');


return (
\<View style={styles.container}\>
\<TextInput
style={styles.textInput}
value={text}
onChangeText={setText}
placeholder=\"Placeholder\"
placeholderTextColor=\"gray\"
textAlign=\"right\" // This affects both input text and placeholder
/\>
\</View\>
);
};


const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingVertical: 5,
borderColor: \'gray\',
borderWidth: 1,
borderRadius: 5,
},
textInput: {
fontSize: 16,
},
});

`export default MyComponent;
`

How can I achieve the desired effect of aligning the input text to the right while keeping the placeholder text aligned to the left?

Any help would be greatly appreciated. Thank you!

答案1 {#1}

得分: 0

我实际上不知道，在React Native中是否有一种本地方式可以不同地为占位符添加样式。但是，由于您在输入文本时会更新状态，因此您可以对此做出反应并更改对齐方式：

textAlign={text.length > 0 ? "right" : "left"}

英文:

I actually don't know, if there is any native way to style the placeholder differently in React Native. But since you update the State, as soon as text is entered, you can react on that and change the alignment:

textAlign={text.length > 0 ? "right" : "left"}

答案2 {#2}

得分: 0

在React Native中进行样式设置与React本身类似，我认为您想要实现的效果类似于以下方式：

return (
  <View style={styles.container}>
    <View style={styles.textInputContainer}>
      <TextInput
        style={styles.input}
        value={inputValue}
        onChangeText={text => setText(text)}
      />
      <Text style={styles.placeholder}>Placeholder</Text>
    </View>
  </View>
);

而样式会如下所示：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 5,
    padding: 10,
  },
  placeholder: {
    position: 'absolute',
    right: 15,
    color: 'gray',
  },
  input: {
    flex: 1,
  },
});

您可以使用Text组件，并将其作为TextInput的占位符，然后调整样式。 英文:

In terms of styling in react-native it's similar to React per se, I believe what you are trying to achieve is something like this:

 return (
<View style={styles.container}>
  <View style={styles.textInputContainer}>
    <TextInput
      style={styles.input}
      value={inputValue}
      onChangeText={text => setText(text)}
    />

      <Text style={styles.placeholder}>Placeholder</Text>



`</View>
</View>
);
`

and the styles will be like this:

<pre>const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: 'gray',
borderRadius: 5,
padding: 10,
},
placeholder: {
position: 'absolute',
right: 15,
color: 'gray',
},
input: {
flex: 1,
},
})</pre>
You can use the Text and make it as the placeholder of the TextInput and just manipulate the style.