web-dev-qa-db-ja.com

Reactネイティブ複数行TextInput、テキストは中央揃え

したがって、multiline = trueを使用したテキスト入力を使用すると、テキストが上にプッシュされるのではなく、垂直方向に中央揃えになるという問題が発生します。

この問題は、iOSとAndroidの両方で発生しますが、Androidには、複数の行を入力すると1行の高さまでレターボックス化されるという別の問題があります。

指摘したいのですが、textAlignVertical: 'top'をテキスト入力のスタイルに

コード：（フォームテキストを含むフォームで使用するため、これを別の協力者として持っていますが、すべてのパラメーターに何かが渡されます）

    <TextInput
            style={styles.input}
            value={value}
            autoComplete={autoComplete}
            autoCapitalize={autoCapitalize}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            autoFocus={autoFocus}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            multiline={multiline || false}
            ref={(r) => { inputRef && inputRef(r); }}
    />

スタイル：

input: {
    paddingRight: 10,
    lineHeight: 23,
    flex: 2,
    textAlignVertical: 'top'
},

iosスクリーンショット 

Androidスクリーンショット 

androidiosreactjsreact-nativetextinput
10
Red

したがって、textinputを囲むビューにはalignItems: 'center'があり、テキスト入力内のテキストを中央に配置することがわかりました。

それをalignItems: this.multiline ? 'flex-start' : 'center',に変更しました

Android問題についても、レターボックスを修正したnumberOfLines={5}を追加する必要がありました。

1
Red

同じ問題に直面している人がいる場合は、textAlignVertical: "top"これは機能します。詳細については、試してみてください https://github.com/facebook/react-native/issues/13897

19
Subhendu Kundu

私はあなたのためにこれを試しましたそれが正しいかどうか私に知らせてください

 <TextInput
            style={styles.input}
            value={this.state.value}
            onChangeText={text=>this.setState({value:text})}
            multiline={true}
            underlineColorAndroid='transparent'
    />

スタイルとして

  input: {
    width:200,
    borderBottomColor:'red',
    borderBottomWidth:1,
},

そしてexpo linkがあなたを助けるかもしれません ここをクリック

3
chetan godiya