反応ネイティブでテキスト入力を正しく整列させる方法は？

テキスト入力は中央揃えです。左上隅から入力を受け取るようにこのテキスト入力を修正する方法

これがテキスト入力用の私の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
}

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

すなわち textAlignVertical: 'top'

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

paddingTop: 0,
paddingBottom: 0

Githubの問題

私はAndroidでTextInputスタイルがtextAlignVertical: 'top'機能する解決策を見つけました。しかし、iOSでは、TextInputpropはmultiline={true}機能します。

iOSアプリでも同様の使用例があり、TextInputの高さは100で、プレースホルダーが中央に表示されていました。使っmultiline={true}てみたら、上からテキストが出てきました。お役に立てば幸いです。

それを与えるtextAlignVertical : "top"とあなたの問題は解決します。

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />

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

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

複数行の例で船が文書化されているようにUIエクスプローラでネイティブに動作するはず反応することを。

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

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

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

その問題には最小限の複数行機能を提供するコードがいくつかあるので、それで動作させることができるかもしれません。

それは私のために働いた（RN0.61.5）：

<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />

あなたがコードを探している場合に備えて：

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

import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// ...
intext: {
    height:screenHeight - 10,
    textAlignVertical: 'top',
    fontSize:17,
    padding:12,
    fontFamily:'courier',
    margin:10,     
},

要素インスペクターごとに、iOSにはpaddingTop: 5forがありmultiline TextInputます。paddingVertical: 15すべての入力を設定したにもかかわらず、これは引き続き適用されました。その結果、iOSの複数行入力でテキストが中央に配置されませんでした。解決策は、さらに追加することでしたpaddingTop: 15場合TextInputであるmultilineと、プラットフォームはiOSのです。現在、AndroidとiOSの両方のプラットフォームで、単一行入力と複数行入力の間に視覚的な違いはありません。

iOSの場合はデフォルトだと思いますが、私の場合はAndroidの場合paddingVertical: 0,はテキストスタイルへの追加が機能しました。

上記の回答は、iOSまたはAndroidのいずれかを示していますが、これは非常に誤解を招く可能性があるため、両方のプラットフォームで修正されます。

<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner 
}}
multiline={true} // ios fix for centering it at the top-left corner 
numberOfLines={10}
/>

アンドロイド用 -

style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner 
//...
}}

iOSの場合multiline={true} 、<TextInput/>コンポーネントに追加 します

両方のプラットフォームでテキストを垂直方向の中央に揃えるには、次を使用します。

Android用 textAlignVertical: "center"

iOS用 justifyContent: "center"