React Native：如何將<TextInput/>的高度和寬度設置爲<View/>容器？

我目前在<View>內有<TextInput>，它有一個padding: 15。我希望<TextInput>'s的寬度和高度能夠覆蓋<View>內部除填充以外的所有空間。React Native：如何將<TextInput/>的高度和寬度設置爲<View/>容器？

所以，我想var width = Dimensions.get('window').width及以下，但<TextInput>恪守填充左側但是當你繼續鍵入，它超越了右側邊距：

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

所以，我怎麼能得到TextInput覆蓋內部所有空間，高度和寬度，View也遵守View的填充規則？

謝謝

2016-09-28 Walter

嘗試將TextInput的樣式設置爲flex：1而不是獲取寬度。 Flex樣式將自動填充您的視圖並將填充留空。

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

2016-09-28 06:02:16 rudydydy

謝謝！它工作得很好。有一個問題，爲什麼必須在TextInput的開始處點擊右鍵以獲取文本光標並開始輸入？我怎麼做到這一點，如果我點擊任何地方的TextInput封面，在開始的文本光標會彈出，我可以開始輸入？ – Walter

嘗試獲得View「第一s尺寸：

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

然後使用檢索到的寬度和高度來設置TextInput的寬度和高度。唯一的是你在運行時獲得這些值。

2016-09-28 07:18:30

另一個很好的答案是添加：

alignItems: 'stretch'

alignItems：「拉伸」，只要將延伸沿軸間的每個子元素的子元素沒有一個指定的寬度（flexDirection：行）或高度（flexDirection：列）。

在容器中，如果你有一個，是這樣的：

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

2017-10-25 13:40:16

回答