如何在react-native頁面中居中TextInput？

Question

當TextInput聚焦並且Android鍵盤打開時需要在鍵盤上方的屏幕上居中TextInput。何做到這一點？

Answer 1

您將需要使用flexbox。

在你需要像父容器：

var styles = StyleSheet.create({ 
    contaner: { 
     display: 'flex', 
     flexDirection: 'row', 
     justifyContent: 'center 
    } 
}); 

這裏是一個很好的指導了flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

出於某種原因justifyContent不是爲工作的TextInput所以只需使用空間。下面是例子：

var styles = StyleSheet.create({ 
    textInput: { 
    marginLeft: 50, 
    marginRight: 50 
    } 
}); 

只要確保樣式設置的TextInput：

<TextInput style={styles.textInput} /> 

差點忘了 - 不設置寬度，使用利潤來定義尺寸，否則將無法正常工作。

Answer 3

我知道這是一個老問題，但我只是遇到了同樣的問題，並找到了解決方案，所以我想我會分享給其他任何有此問題的人。

我有樣式的容器：

flex:1, 
justifyContent: 'center', 
alignItems: 'center' 

在該容器我有幾個Text元素，具有Slider和TextInput一起。除了TextInput以外，所有內容都正確居中。爲了解決這個問題，我添加了以下的樣式我TextInput：

alignSelf: 'center' 

而且現在TextInput正確集中在屏幕上。