Question

使用React-Native我需要将Image和组件LYDSceneQuestion置于中心位置：

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'
    }
});

目前我的图像与底部对齐，我如何将其垂直居中？

Answer 1

我将建议一个使用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>

我认为如果你遵循这个，你可以垂直居中。

使用flexbox垂直和水平对齐图像

1 个答案: