web-dev-qa-db-ja.com

React Nativeでテキスト入力を正しく配置するにはどうすればよいですか？

テキスト入力は中央揃えです。このテキスト入力を修正して、左上隅から入力を取得する方法

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

ここにテキスト入力のための私のCSSがあります

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}
javascriptiosreactjsreact-native
60
Vikramaditya

私は同じ問題を抱えていましたが、上記のメモでは解決しませんでした。 Android専用スタイルプロパティ textAlignVertical があり、複数行の入力に関するこの問題を修正します。

すなわちtextAlignVertical: 'top'

133
user657199

AndroidでTextInputスタイルtextAlignVertical: 'top'が機能するソリューションを見つけました。しかし、iosでは、TextInput prop multiline={true}は機能します。

8
aseel

IOSアプリでもTextInputの高さが100で、プレースホルダーが真ん中に表示されている同様のユースケースがありました。 multiline={true}を使用し、テキストが上から表示されるようにしました。お役に立てば幸いです。

5
Mahendra Liya

TextInputにはデフォルトのパディングがあります。次を設定してオーバーライドします。

paddingTop: 0,
paddingBottom: 0

Githubの問題

4
Tarik Chakur

更新2015-07-03：複数行のテキスト入力がマージされました：

https://github.com/facebook/react-native/pull/991

UIエクスプローラーのReact Nativeに同梱されている 複数行の例 は、文書どおりに機能するはずです。

あなたが抱える問題は、複数行のTextInputがまだ正しく動作しておらず、ドキュメントが誤解を招くということです。このGithubの問題を参照してください。

https://github.com/facebook/react-native/issues/279

「まだその機能をオープンソースに移植していません。」

その問題には、最小限の複数行機能を提供するコードがあるため、それを使用して動作させることができる場合があります。

3
Colin Ramsay

コードを探している場合だけ

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>
0
ishab acharya