React Native 调试时样式不生效是怎么回事？

A. 旗施提问于 2026-03-14 01:13:17 阅读 5

移动

我在 React Native 里调试样式，明明写了样式代码，但界面就是没变化，连背景色都不显示。我试过 reload 和重启 Metro，都没用。

这是我的样式代码：

container: {
  flex: 1,
  backgroundColor: '#ff0000',
  alignItems: 'center',
  justifyContent: 'center'
}

是不是哪里写错了？还是调试工具没刷新？

我来解答赞 1 收藏

反馈

1 条解答

宇文明明 Lv1

你这个问题一般是样式没正确应用到组件上。用 StyleSheet.create 包裹定义，然后通过 style={styles.container} 传给组件：

import { StyleSheet, View } from 'react-native';



const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#ff0000',

    alignItems: 'center',

    justifyContent: 'center'

  }

});



function App() {

  return (

    <View style={styles.container}>

      <Text>hello</Text>

    </View>

  );

}

如果你是直接写 style={container} 而不是 style={styles.container}，那就是这个问题。

2026-03-14 02:01