React Native学习笔记（一）

news/2024/12/5 2:11:44/

一、创建ReactNative项目

1.1、指令创建
React Native 有一个内置的命令行界面，你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它，而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目

npx react-native@latest init AwesomeProject

在这里插入图片描述

现在ReactNative的项目就创建完成了，我们就用VScode打开,运行项目以及编辑。

一级标题

├── /test # RN生成，测试目录

  ├── /android                 # RN生成，android代码目录，具体见下图├── /ios                     # RN生成，代码目录，具体见下图├── /node_modules            # 自动生成，安装依赖的目录，不会被提交├── .babelrc                 # RN生成，Babel配置文件├── .buckconfig              # RN生成，Buck是Mac OS X和Linux使用的构建工具，Buck的配置文件，buck是Facebook开源的高效构建系统├── .flowconfig              # RN生成，Flow是一个静态的类型检查工具├── .gitattributes           # RN生成，配置Git对一个特定的子目录或子文件集运用那些设置项├── .gitignore               # RN生成，配置Git忽略提交的文件├── .watchmanconfig          # RN生成，Watchman用于监控文件变化，辅助实现工程修改所见即所得├── yarn.lock                # RN生成，Yarn是node包管理器，yarn.lock文件使程序在不同的机器上以同样的方式安装依赖├── package.json             # RN生成，用于描述项目的基本信息以及需要的依赖信息├── index.android.js         # RN生成，android入口文件├── index.ios.js             # RN生成，ios入口文件├── index.web.js             # 自定义，web入口文件├── CHANGELOG.md             # 自定义，版本更新日志├── README.md                # 自定义，项目运行说明

2.1、运行项目

第 1 步：启动项目

npx react-native start

第 2 步：启动应用程序

npx react-native run-android

第3步：项目启动完成

在这里插入图片描述

第4步、设置模拟器悬浮在窗口最顶端段

在这里插入图片描述

三 React Native核心组件

在这里插入图片描述

四 基本语法

4.1 StyleSheet

StyleSheet是RN声明样式的API

RN中的样式与CSS的不同

  • 没有继承性：RN中的继承只发生在Text组件上
  • 样式名采用小驼峰命名：fontSize VS font-size
  • 所有尺寸都是没有单位：width:100
  • 有些特殊的样式名：marginHorizontal(水平外边距)，marginVertical(垂直外边距)

RN样式的声明

  • 通过style属性直接声明
  • 属性值为对象：<组件 style={{样式}}/>； 属性值为数组：<组件 style={[{样式1},...{样式2}]}/>
  • 在style属性中调用StyleSheet声明样式
引入：import {StySheet,View} from 'react-native' 
声明：const styles=StyleSheet.create({foo;{样式1}，bar:{样式2}}) 
使用：<View style={[styles.foo,styles]}>内容</View>

创建组件，RNC快捷命令

/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';export default class App extends Component {render() {return (<View>{/* 通过style属性直接声明 */}<Text style={{fontSize: 30, color: 'blue'}}> textInComponent </Text><Text style={[{color: 'red'}, {color: 'yellow'}, {fontSize: 30}]}>textInComponent</Text>{/* 在style属性中调用StyleSheet声明样式 */}<Text style={[styles.foo]}>Hello World</Text><Text style={[styles.bar]}>Hello World</Text></View>);}
}// 声明样式对象
const styles = StyleSheet.create({foo: {fontSize: 40,fontWeight: 'bold',},bar: {fontSize: 30,fontWeight: 'bold',},
});

按Ctrl+M,弹出调试菜单，点击热更新，页面就会更
在这里插入图片描述
热更新效果
在这里插入图片描述

4.2、Flexbox布局

Flexbox（弹性布局）——术语

  • 容器（container)：采用Flex布局的元素，称为Flex容器（Flex container)，简称“容器”。
  • 项目（Item)：容器所有的子元素，称为Flex项目（Flex item）,简称“项目”。
  • 主轴：（main axis)
  • 交叉轴：（cross axis)
    在这里插入图片描述

Flexbox ——属性（常用）

  • flexDirection：声明主轴方向：row(Web默认）| column(RN默认)

  • justifyContent：声明项目的主轴的对齐方式

  • alignItems：声明项目在交叉轴的对齐方式

  • flex：声明项目在主轴上的尺寸比例

弹性布局各属性介绍（https://blog.csdn.net/qq_39431405/article/details/144110042）

4.2.1、flexDirection

FlexDirection.tsx

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View,ScrollView} from 'react-native';export default class FlexDirection extends Component {render() {return (// View非滚动<View><Text style={[styles.div1]}> 主轴方向 </Text>{/* ScrollView可滚动 */}<ScrollView><Text style={[styles.div2]}>flexDirection:"colum(默认)" </Text><View style={[styles.container]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"colum-reverse" </Text><View style={[styles.container,styles.flexColumnReverse]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"row" </Text><View style={[styles.container,styles.flexRow]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"row-reverse" </Text><View style={[styles.container,styles.flexRowReverse]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View></ScrollView></View>);}
}const styles = StyleSheet.create({container:{height:150,margin:10,borderWidth:1,borderColor:'pink',},div1:{fontSize:30,marginHorizontal:10,},div2:{fontSize:24,marginHorizontal:10,},itemBase:{height:30,borderWidth:1,borderColor:'red',backgroundColor:'pink',padding:5,textAlign:'center',},flexColumn:{flexDirection:'column',},flexColumnReverse:{flexDirection:'column-reverse',},flexRow:{flexDirection:'row',},flexRowReverse:{flexDirection:'row-reverse',},
});

运行效果：

在这里插入图片描述

4.2.2、justifyContent

JustifyContent.tsx

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View,ScrollView} from 'react-native';export default class JustifyContent extends Component {render() {return (// View非滚动<View><Text style={[styles.div1]}> 项目在主轴上对齐方式 </Text>{/* ScrollView可滚动 */}<ScrollView><Text style={[styles.div2]}>JustifyContent:"flex-start(默认)" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentStart]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"flex-center" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentCenter]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"flex-end" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentEnd]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"space-around" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentAround]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"space-evenly" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentEvenly]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>flexDirection:"space-between" </Text><View style={[styles.container,styles.flexRow,styles.JustifyContentBetween]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View></ScrollView></View>);}
}const styles = StyleSheet.create({container:{height:150,margin:10,borderWidth:1,borderColor:'pink',},div1:{fontSize:30,marginHorizontal:10,},div2:{fontSize:24,marginHorizontal:10,},itemBase:{height:30,borderWidth:1,borderColor:'red',backgroundColor:'pink',padding:5,textAlign:'center',},flexRow:{flexDirection:'row',},flexRowReverse:{flexDirection:'row-reverse',},JustifyContentStart:{justifyContent:'flex-start',},JustifyContentCenter:{justifyContent:'center',},JustifyContentEnd:{justifyContent:'flex-end',},JustifyContentAround:{justifyContent:'space-around',},JustifyContentEvenly:{justifyContent:'space-evenly',},JustifyContentBetween:{justifyContent:'space-between',},
});

运行效果：
在这里插入图片描述

4.2.2、alignItems

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View,ScrollView} from 'react-native';export default class AlignItems extends Component {render() {return (// View非滚动<View style={{height:'100%'}}><Text style={[styles.div1]}> 项目在主轴上对齐方式 </Text>{/* ScrollView可滚动 */}<ScrollView><Text style={[styles.div2]}>alignItems:"flex-start(默认)" </Text><View style={[styles.container,styles.flexRow,styles.alignItemsStart]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>alignItems:"center" </Text><View style={[styles.container,styles.flexRow,styles.alignItemsCenter]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>alignItems:"flex-end" </Text><View style={[styles.container,styles.flexRow,styles.alignItemsEnd]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>alignItems:"stretch" </Text><View style={[styles.container,styles.flexRow,styles.alignItemsStretch]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View><Text style={[styles.div2]}>alignItems:"baseline" </Text><View style={[styles.container,styles.flexRow,styles.alignItemsBaseline]}><Text style={[styles.itemBase]}>苹果</Text><Text style={[styles.itemBase]}>香蕉</Text><Text style={[styles.itemBase]}>芒果</Text></View></ScrollView></View>);}
}const styles = StyleSheet.create({container:{height:150,margin:10,borderWidth:1,borderColor:'pink',},div1:{fontSize:30,marginHorizontal:10,},div2:{fontSize:24,marginHorizontal:10,},itemBase:{height:30,borderWidth:1,borderColor:'red',backgroundColor:'pink',padding:5,textAlign:'center',},flexColumn:{flexDirection:'column',},flexColumnReverse:{flexDirection:'column-reverse',},flexRow:{flexDirection:'row',},flexRowReverse:{flexDirection:'row-reverse',},alignItemsStart:{alignItems:'flex-start',},alignItemsCenter:{alignItems:'center',},alignItemsEnd:{alignItems:'flex-end',},alignItemsStretch:{alignItems:'stretch',},alignItemsBaseline:{alignItems:'baseline',},
});

运行效果：

在这里插入图片描述

4.2.3 Flex

Flex.tsx

/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View,ScrollView} from 'react-native';export default class Flex extends Component {render() {return (// View非滚动<View style={{height:'100%'}}><Text style={[styles.div1]}> 项目在主轴上占比 </Text>{/* ScrollView可滚动 */}<ScrollView><Text style={[styles.div2]}>flexRow 1:1:1</Text><View style={[styles.container,styles.flexRow]}><Text style={[styles.itemBase,{flex:1}]}>苹果</Text><Text style={[styles.itemBase,{flex:1}]}>香蕉</Text><Text style={[styles.itemBase,{flex:1}]}>芒果</Text></View><Text style={[styles.div2]}>flexRow 1:2:3 </Text><View style={[styles.container,styles.flexRow]}><Text style={[styles.itemBase,{flex:1}]}>苹果</Text><Text style={[styles.itemBase,{flex:2}]}>香蕉</Text><Text style={[styles.itemBase,{flex:3}]}>芒果</Text></View><Text style={[styles.div2]}>flexColumn:1:1:1 </Text><View style={[styles.container,styles.flexColumn]}><Text style={[styles.itemBase,{flex:1}]}>苹果</Text><Text style={[styles.itemBase,{flex:1}]}>香蕉</Text><Text style={[styles.itemBase,{flex:1}]}>芒果</Text></View><Text style={[styles.div2]}>flexColumn:1:2:3 </Text><View style={[styles.container,styles.flexColumn]}><Text style={[styles.itemBase,{flex:1}]}>苹果</Text><Text style={[styles.itemBase,{flex:2}]}>香蕉</Text><Text style={[styles.itemBase,{flex:3}]}>芒果</Text></View></ScrollView></View>);}
}const styles = StyleSheet.create({container:{height:150,margin:10,borderWidth:1,borderColor:'pink',},div1:{fontSize:30,marginHorizontal:10,},div2:{fontSize:24,marginHorizontal:10,},itemBase:{height:30,borderWidth:1,borderColor:'red',backgroundColor:'pink',padding:5,textAlign:'center',},flexColumn:{flexDirection:'column',},flexColumnReverse:{flexDirection:'column-reverse',},flexRow:{flexDirection:'row',},flexRowReverse:{flexDirection:'row-reverse',},
});

运行效果：

在这里插入图片描述

五 响应式布局

5.1 Flexbox模型

React Native 在布局和样式上极大程度上借鉴了 Web 前端所使用的 CSS 规格。CSS 布局方面的算法主要由三个部分组成，首先是解决单个 UI 元素的尺寸问题的 Box 模型（具体由 width，height，padding，border，margin 属性构成），其次是解决 UI 元素相对位置的 Position 模型（具体由 position，top，right，bottom，left 属性构成），最后是解决剩余空间分配问题的 Flexbox 模型。

5.2 Dimensions （获取屏幕信息）

Dimensions API 是 React Native 提供的获取屏幕信息用的 API。开发人员可以通过调用 Dimensions.get()方法取得一个包含屏幕长宽信息的对象，来把握当前用户的设备的屏幕大小，并且以此来简易推测用户是否处于横屏状态。用户使用应用的过程中，由于设备的旋转方向变化或者多应用分屏等情况，屏幕信息可能随时会产生变化。作为可以对应各种变化情况的最佳实践，推荐在组件的 onLayout 的回调中使用 Dimensions.get()方法来获取屏幕信息。

import {Dimensions} from 'react-native';
const windowWidth=Dimension.get('window').width;
const windowHeight=Dimension.get('window').height;

使用Dimensions
创建：DimensionsTest.tsx

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';export default class DimensionsTest extends Component {render() {return (<View style={[styles.container]}><View style={styles.itemBase}><Text style={styles.h3}> 首页 </Text></View><View style={styles.itemBase}><Text style={styles.h3}> 分类 </Text></View><View style={styles.itemBase}><Text style={styles.h3}> 动态 </Text></View><View style={styles.itemBase}><Text style={styles.h3}> 筛选 </Text></View></View>);}
}const styles = StyleSheet.create({container:{flexDirection:'row',},itemBase:{justifyContent:'center',alignItems:'center',backgroundColor:'pink',//获取窗口的宽度然后分4份width:Dimensions.get('window').width / 4,height:90,borderWidth:1,borderColor:'yellow',//设置字体无效，因为RN不存在继承，需要单独设置fontSize:25,},h3:{fontSize:24,},
});

运行效果：

在这里插入图片描述


http://www.ppmy.cn/news/1552438.html

相关文章

【linux】（26）shell脚本-变量、位置变量

【linux】（26）shell脚本-变量、位置变量

定义和使用变量 定义变量 在 Shell 脚本中定义变量非常简单&#xff0c;直接赋值即可&#xff1a; #!/bin/bash name"Alice"注意&#xff0c;等号两边不能有空格。 使用变量 使用变量时需要在变量名前加上 $ 符号&#xff1a; #!/bin/bash name"Alice&quo…
阅读更多...
llamaindex实战-ChatEngine-ReAct Agent模式

llamaindex实战-ChatEngine-ReAct Agent模式

概述 ReAct 是一种基于Agent的聊天模式&#xff0c;构建在数据查询引擎之上。对于每次聊天交互&#xff0c;代理都会进入一个 ReAct 循环&#xff1a; 首先决定是否使用查询引擎工具并提出适当的输入 &#xff08;可选&#xff09;使用查询引擎工具并观察其输出 决定是否重复…
阅读更多...
C. Raspberries

C. Raspberries

time limit per test 2 seconds memory limit per test 256 megabytes You are given an array of integers a1,a2,…,ana1,a2,…,an and a number kk (2≤k≤52≤k≤5). In one operation, you can do the following: Choose an index 1≤i≤n1≤i≤n,Set aiai1aiai1. F…
阅读更多...
【k8s】kubelet 的相关证书

【k8s】kubelet 的相关证书

在 Kubernetes 集群中&#xff0c;kubelet 使用的证书通常存放在节点上的特定目录。这些证书用于 kubelet 与 API 服务器之间的安全通信。具体的位置可能会根据你的 Kubernetes 安装方式和配置有所不同&#xff0c;下图是我自己环境【通过 kubeadm 安装的集群】中的kubelet的证…
阅读更多...
单台服务器上创建多个端口MySQL服务

单台服务器上创建多个端口MySQL服务

单台服务器上创建多个端口MySQL服务 直接拷贝已经运行的数据库文件： # ll /data/mysql/ 总用量 204 drwxr-x--- 2 mysql mysql 4096 9月 15 2023 bin -rw-r--r-- 1 mysql mysql
阅读更多...
ubuntu查看本地镜像源可用的deb包

ubuntu查看本地镜像源可用的deb包

在Ubuntu系统中&#xff0c;查看本地镜像源可用的deb包可以通过以下几种方法实现&#xff1a; 方法一&#xff1a;使用apt-cache命令 apt-cache命令可以用来查询本地和远程的软件包信息。你可以使用以下命令来查看本地镜像源可用的deb包&#xff1a; apt-cache search .这个…
阅读更多...
Android 使用OpenGLES + MediaPlayer 获取视频截图

Android 使用OpenGLES + MediaPlayer 获取视频截图

概述 Android 获取视频缩略图的方法通常有: ContentResolver: 使用系统数据库MediaMetadataRetriever: 这个是android提供的类&#xff0c;用来获取本地和网络media相关文件的信息ThumbnailUtils: 是在android2.2&#xff08;api8&#xff09;之后新增的一个&#xff0c;该类为…
阅读更多...
《智能体雏形开发（高阶实操）》开发计划概述

《智能体雏形开发（高阶实操）》开发计划概述

智能体雏形开发计划 通过本计划，逐步完成一个可以真实运行的智能体雏形。 最终完成一个**“用户日志文件生成日报，日报再进一步汇总成周报”**的任务驱动型智能体雏形 第一阶段：基础准备与环境搭建 1. 学习基础知识 了解智能体的概念、类型和技术框架。学习大模型（如阿里…
阅读更多...
最新文章

Copyright @ 2022~2023