Expo+React Native中文字下方彩色Divider不显示问题求助

我在使用Expo结合React Native开发时，想要在文本“Vos informations”下方创建一个彩色分隔条，但它并未显示在屏幕上，预期效果是文本下方有一个宽幅分隔条。

相关代码 #

组件代码 #

return (
    <View style={styles.container}>
        <Image style={styles.img} source={logo}/>
        <Text style={styles.txt}>Vos informations</Text>
        <View style={styles.divider} />
    </View>
)

样式代码 #

const styles = StyleSheet.create({
    container :{
         flex:1,
         flexDirection:'column',
         alignItems:'center',
         justifyContent:'center'
    },
    img: {
        width: 300, 
        height:100, 
        resizeMode : 'contain',
    }, 
    txt : {
        fontFamily: 'Cairo', 
        fontSize:24, 
    },
    divider :{
        backgroundColor : '#FB8703',
        width:'80%',
        height:29,
    }
})

问题原因及解决方案 #

问题根源在于容器的justifyContent: 'center'属性：当容器使用垂直flex布局并设置垂直居中时，三个子元素（图片、文本、分隔条）会被集中在屏幕垂直方向的中间区域。如果屏幕高度较大，分隔条可能会被挤到屏幕可视范围之外，或者和文本过于贴近导致视觉上难以区分。

给你两种可行的解决办法：

方法一：给分隔条添加上边距 #

直接在分隔条的样式中添加marginTop，拉开它和文本的距离，确保在居中布局下能正常显示：

divider :{
    backgroundColor : '#FB8703',
    width:'80%',
    height:29,
    marginTop: 16, // 添加上边距，数值可根据需求调整
}

方法二：调整容器布局方式 #

将容器的justifyContent改为flex-start，让内容从屏幕顶部开始排列，再通过paddingTop控制整体内容的垂直位置，这样分隔条肯定会出现在文本下方：

container :{
     flex:1,
     flexDirection:'column',
     alignItems:'center',
     justifyContent:'flex-start',
     paddingTop: 60, // 调整顶部内边距，控制内容位置
}

另外可以额外检查：确保图片的resizeMode没有导致其实际高度超出设置值，避免挤占其他元素的显示空间。

内容的提问来源于stack exchange，提问作者Khalil Mannai