對齊圖像垂直和水平使用Flexbox的

使用React-Native我需要中心我Image和組件LYDSceneQuestion：對齊圖像垂直和水平使用Flexbox的

const SplashScreen =() => { 
    return (
     <View style={styles.container}> 
      <LYDSceneQuestion text="Welcome to" /> 

      <Image source={theme.images.logo} style={styles.logo} /> 
      <NextButton onPress={onNext} /> 
     </View> 
    ); 
}; 

export default SplashScreen; 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     flexDirection: 'column', 
     justifyContent: 'center', 
     alignItems: 'center' 
    }, 
    logo: { 
     flex: 1, 
     width: 300, 
     height: 100, 
     resizeMode: 'contain' 
    } 
});

目前我的圖像對齊到了谷底，我怎麼能我垂直居中呢？

來源

2017-07-19 Bomber

我想看看這個問題的第二個答案：https：//stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically – flyer

[Flexbox：水平和垂直中心]可能重複（https： //sackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically） – sol

設置顯示：flex;在容器中 –

我會建議使用flex的一個小技巧，給你的父視圖flex一個，然後安排組件在獨立的子視圖裏面，並給他們相同的flex，就像我在下面做的一樣。

<View style={styles.container,{flex: 1}}> 
      <View style={{flex: 2}}> 
       <LYDSceneQuestion text="Welcome to" /> 
      </View> 
      <View style={{flex: 2}}> 
      <Image source={theme.images.logo} style={styles.logo}/>     
      </View> 
      <View style={{flex: 2}}> 
      <NextButton onPress={onNext} /> 
      </View> 
     </View>

我想如果你遵循這個，你可以垂直居中。

來源

2017-07-20 04:40:48

對齊圖像垂直和水平使用Flexbox的

回答

相關問題