rn 基础设置解析

怼烎@ 2021-07-25 00:41 344阅读 0赞

1、引入react
    	 import React from 'react'
    
    2、从rn导入组件，只能使用导入的组件替代html标签,不能使用其他如div等标签
    	import {
    		//样式组件,通过它来create样式
    		StyleSheet,
    		//视图组件,类似div
    		View,
    		//文本组件,放置文本内容
    		Text
    	} from 'react-native'
    
    3、定义函数式组件,类组件的使用和react一样
    const App=()=>{
    	return (
    	//<></>为根组件,可换成View来代替
    		<>
    		//xxx为通过StyleSheet来create出的样式对象,xx为包含样式的属性对象
    			<View style={xxx.xx}>
    	            <Text>
    	                hello world
    	            </Text>
    	        </View>
    		</>
    	)
    }
    
    4、定义样式对象
    	const xxx=StyleSheet.create({
    		xx:{
    			样式
    			‘-’换成驼峰命名法
    		}
    	})
    
    5、导出组件
    export default App;

代码示例:

import React from 'react';
    
    //导入后才能使用这些组件，不能使用额外的组件如div等
    import { 
        //样式对象
        StyleSheet,
        //视图组件,类似div,默认弹性布局
        View,
        //文本组件,放置文本内容
        Text
    } from 'react-native'
    
    //定义一个函数式组件
    const App=()=>{ 
      return (
        <>
            <View style={ styles.view}>
                <Text>
                    hello world
                </Text>
            </View>
        </>
      ) 
    }
    
    //定义样式对象
    const styles=StyleSheet.create({ 
        view:{ 
            height:200,
            width:200,
            //驼峰命名
            backgroundColor:'rgba(200,255,0,0.5)'
        }
    });
    
    export default App;

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL：基础查询失败解析

在MySQL中，如果基础查询失败，通常会返回错误信息。下面是一些常见的错误类型和可能的解决方法： 1. **语法错误**： - 错误提示：`Error Code: 10

向右看齐/ 2024年12月24日 14:09/ 0 赞/ 9 阅读

相关 TensorFlow 基础概念解析

• TensorFlow模块与架构介绍以下资料来源于极客时间学习资料 **TensorFlow 模块与 APIs** **![1604514-20190724...

太过爱你忘了你带给我的痛/ 2024年04月20日 09:13/ 0 赞/ 86 阅读

相关 Date()对象的设置与解析

怎么获取当前时间? 怎么给Date对象设置特定时间? 将Date对象解析为毫秒数？将Date对象解析为日月年？获取小时/分钟/秒？　　直接n

本是古典何须时尚/ 2023年06月04日 02:59/ 0 赞/ 10 阅读

相关 JQuery基础解析

目录 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器基本选择器表单选择器 --------------------

快来打我*/ 2022年11月29日 05:55/ 0 赞/ 154 阅读

相关 JavaSE基础 - main函数解析

为什么Java主函数要写成public static void main(String\[\] args),而不写成其他格式，可能我们已经习以为常，不去追究了！当然，这也是一个

た入场券/ 2022年05月28日 10:48/ 0 赞/ 208 阅读

相关 Vue_基础框架目录解析

当我们用npm生成一个项目的时候，我们要了解这个项目的文件 ![这里写图片描述][70] 1.index.html 是所有HTML的入口，点开该index.html 可

女爷i/ 2022年05月22日 13:10/ 0 赞/ 222 阅读

相关一、vs 基础配置文件解析

一、vs 基础配置文件解析 .vcproj是工程文件，sln是解决方案文件。一个解决方案里面可以包含多个工程。你打开vcproj文件编译不了可能是因为这个工程里面用到

- 日理万妓/ 2022年05月19日 11:34/ 0 赞/ 539 阅读

相关 Java基础之XML解析

因为最近要练习手写WebServer服务器，里面需要用到XML解析，发现以前没有编写过解析XML解析的博文，今天就补一下。 XML解析方式 DOM解析

末蓝、/ 2021年12月10日 22:21/ 0 赞/ 283 阅读

相关 Java 基础 | Object 源码解析

![Object源码解析][Object] Java 是一门面向对象的语言，在 Java 里面一切都可以看作是一个对象，而 Java 里面所有的对象都默认继承于 Object

今天药忘吃喽~/ 2021年11月01日 06:38/ 0 赞/ 403 阅读

相关 rn 基础设置解析

1、引入react import React from 'react' 2、从rn导入组件，只能使用导入的组件替代html标签,不能使用其

怼烎@/ 2021年07月25日 00:41/ 0 赞/ 345 阅读