欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

rn 基础设置解析

程序员文章站 2022-06-15 22:43:28
...
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;

上一篇: rn 样式

下一篇: mongo:副本集群配置