web-dev-qa-db-ja.com

Reactネイティブ：<TextInput />の高さと幅を<View />コンテナに設定する方法は？

私は現在、_<TextInput>_がある_<View>_の中に_padding: 15_があります。 _<TextInput>'s_の幅と高さが、パディングを除く_<View>_内のすべてのスペースをカバーするようにしたいと思います。

だから私はvar width = Dimensions.get('window').widthと以下を試しましたが、_< TextInput >_は左側のパディングに従いますが、入力を続けると右側のパディングを超えます：

_<View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View>
_

では、TextInputがビュー内のすべてのスペース、高さ、幅をカバーし、ビューのパディングルールにも準拠するようにするにはどうすればよいですか？

ありがとうございました

javascriptcssreactjsreact-nativejsx
8
Walter

幅を取得する代わりに、TextInputのスタイルをflex：1に設定してみてください。 Flexスタイルは自動的にビューを塗りつぶし、パディングは空白のままにします。

<View style = {{ padding: 15 }}> <TextInput style = {{ flex: 1 }} /> </View>
14
rudydydy

別の良い答えは、追加することです：

alignItems: 'stretch'

alignItems： 'stretch'は、子要素に指定された幅（flexDirection：行）または高さ（flexDirection：列）がない限り、すべての子要素を交差軸に沿って引き伸ばします。

コンテナにある場合は、次のようなものです。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
  }
});
9
Gonzalo Ortellado

最初にViewの次元を取得してみてください：

<View 
    onLayout={(event) => {
        var {x_pos, y_pos, width, height} = event.nativeEvent.layout;
    }} 
/>

次に、取得した幅と高さを使用して、TextInputの幅と高さを設定します。唯一のことは、実行時にこれらの値を取得することです。

0
Jan Franz Palngipang