react-native错误找不到变量：样式

Question

我是React-native的新手。我正在尝试在组件中设置视图元素的样式，并且在尝试应用样式标签时，出现以下错误：
注意 ： 我的样式标签位于单独的js文件中
在styles.js中

import {Dimensions} from 'react-native';

    const DEVICE_WIDTH= Dimensions.get('window').width;
    const DEVICE_HEIGHT= Dimensions.get('window').height;

    export default {
       container:{
          backgroundColor: 'white',
          flex:1 ,
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT,
         }
    };

在Main.js文件中

import React,{ Component } from 'react';
import { Router,Scene,Actions} from "react-native-router-flux";
import {View} from 'react-native';

import styles from './styles.js'

class Main extends Component{

render(){
    return(
            <View style={styles.container} >
                    <Text>
                        Hello pages
                    </Text>
            </View>

    );
  }
}

 export default Main;

错误屏幕：

Answer 1

您需要像这样使用StyleSheet.create

export default StyleSheet.create({
container: {
    backgroundColor: 'rgb(249, 250, 252)',
  },
})

还要检查您是否正确导入了styles.js，也不需要像这样将.js导入

import styles from './styles'

Answer 2

添加以下代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }

Answer 3

该问题已通过更正所应用样式的拼写得到解决， 来自

 <View style={style.subcontainer}>,

到

 <View style={styles.subcontainer}>,

因为我有

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"

  },