React Native样式不显示问题求助（附代码与截图）

你的代码里SafeAreaView和内部View都没有设置填充屏幕的样式，导致View仅包裹Text内容，粉色背景因范围太小无法直观看到。

解决方法 #

给SafeAreaView或内部View添加flex: 1属性，让组件填充父容器的可用空间：

import React from 'react'
import { View , Text, SafeAreaView, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container : {
    flex: 1,
    alignItems:'center',
    backgroundColor:'pink',
    justifyContent: 'center', // 可选：让文字垂直居中
  },
})

const App = ()=>{
  return(
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <Text>Hello World!!</Text>
      </View>
    </SafeAreaView>
  )
}

export default App

原因说明 #

React Native中组件默认尺寸由内容决定（wrap content）。没有flex: 1时，View仅包裹Text，背景色范围和文字一致，肉眼难以察觉；添加flex: 1后，组件会填充父容器的剩余空间，背景色就能铺满屏幕显示出来。

内容的提问来源于stack exchange，提问作者Gourav Singh