react-native 笔记StyleSheet_property 'stylesheet' doesn't exist, js engine: he-优快云博客

本文链接：https://blog.youkuaiyun.com/wmmhwj/article/details/64919759

本文档介绍如何在React Native应用中使用StyleSheet创建样式，包括导入必要的组件如Text、View、Image，以及如何利用Dimensions获取设备尺寸。通过示例代码展示了StyleSheet.create方法的用法，用于组件的样式定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, {Component} from ‘react’;
import {
AppRegistry,//注册
StyleSheet,//样式
Text,//文本组件
View,//视图组件
Image//图片组件
} from ‘react-native’;

//引入像素点库
var Dimension = require(‘Dimensions’);
export default class HelloWorld extends Component {
//初始化方法相当于viewDidLoad
render() {

    let pic = {

        uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490157578230&di=b360250681099e0af6030f1202163d90&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F908fa0ec08fa513dde11606e3d6d55fbb3fbd9c3.jpg'

    };

    return (
        <View style={mystyles.container}>
            <View style={mystyles.innerViewStyle}>
                <Text>
                    当前屏幕宽度：{Dimension.get('window').width}
                </Text>
            </View>
            <View style={mystyles.innertwoStyle}>
                <Text>
                    当前屏幕的高度：{Dimension.get('window').height}
                </Text>
            </View>
            <View style={mystyles.innerViewStyle}>
                <Text>
                    当前屏幕的分辨率：{Dimension.get('window').scale}
                </Text>
            </View>
        </View>
    );
}

}

//相当于css样式
const mystyles = StyleSheet.create({

container: {
    //主轴
    // justifyContent: 'center',//水平
    // alignItems: 'center',//垂直
    //改变主轴的方向
    //column  从上到下
    //column-reverse 从下往上
    //row 从左往右
    //row-reverse 从右往左
    flexDirection: 'column-reverse',
},

foneColor: {

    color: 'green',


},

innerViewStyle: {

    backgroundColor: 'green',
    width: 100,
    height: 100,
    justifyContent:'center',
    alignItems:'center',
},

innertwoStyle:{
    backgroundColor: 'red',
    width: 100,
    height: 100,
    justifyContent:'center',
    alignItems:'center',

}

});

//注册Demo 输出到ios应用
AppRegistry.registerComponent(‘HelloWorld’, () => HelloWorld);