App的分类(按开发方式)
大致可以分为这3种:
- native app(原生app:ios或安卓)原生应用程序
原生应用程序外观和运行起来(性能)是最佳的。可以访问本地资源,开法成本高。发布审核周期长。 - web app/ H5 app (APIclound)H5应用程序
整体量级轻,开发成本低,基于浏览器,可以跨平台使用。资源都在远程服务器。网速受到限制时,交互效果也会受到限制,页面跳转费力,不稳定感更强。无法操作很多手机原生设备,摄像头,麦克风,不支持多点触控等。 - hybrid app(混合app)混合应用程序
集原生应用程序和HTML5应用程序的优点(及缺点)于一体。速度快,跨平台。
ReactNative简介
React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。
React Native最终产品很贴近移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。所以有React基础,那么学习RN会非常轻松。
ReactNative中文官网: https://reactnative.cn/
ReactNative学习
搭建环境
- 创建项目
npx react-native init LifeServices --version 0.55.4
LifeServices为项目名称 - 打包并运行项目
yarn react-native run-android
自定义组件
代码笔记:
index.js:
import {
AppRegistry } from 'react-native';
import App from './components/App1';
AppRegistry.registerComponent('AwesomeProject', () => App);
app.js:
// 1、自定义组件
// 1) 引入核心模块
import React, {
Component } from "react"
import {
View, Text, StyleSheet } from "react-native"
// 2) 创建并导出组件
export default class App1 extends Component {
render() {
return (
<View style={
styles.container}>
<Text style={
styles.txt1}>nihoa</Text>
</View>
)
}
}
// 3) 样式代码
const styles = StyleSheet.create({
txt1: {
color: "red"
},
container: {
backgroundColor: "#ccc"
}
})
实现效果:
View组件 - 初步认识ScrollView组件
代码笔记:
app.js:
// 2、 View组件 初步认识ScrollView组件
// 1) 引入核心模块
import React, {
Component } from "react"
import {
View, Text, StyleSheet, ScrollView } from "react-native"
// 2) 创建并导出组件
export default class App2 extends Component {
render() {
return (
<View style={
styles.container}>
{
/* View组件默认情况下超出的内容不可见 */}
{
/* 把ScrollView加载需要出现滚动条的盒子内部,默认出现的是竖向滚动条 如果要横向添加horizontal属性 <ScrollView horizontal> */}
<ScrollView>
<Text style={
styles.txt1}>易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!易烊千玺!!!文字超出不显示!!要用到ScrollView组件!!!</Text>
</ScrollView>
</View>
)
}
}
// 3) 样式代码
const styles = StyleSheet.create({
txt1: {
color: "red"
},
container: {
width: 100,
height: 100,
backgroundColor: "pink"
}
})
实现效果:
获取屏幕的宽高和像素比
代码笔记:
app.js:
// 2、 View组件 初步认识ScrollView组件
import React, {
Component } from "react"
import {
View, Text, Dimensions } from "react-native"
const {
width, height, scale } = Dimensions.get('window')
export default class App3 extends Component {
render() {
return (
<View>
{
/* 获取的是可用范围的宽高 */}
<Text>屏幕的宽度是:{
width}</Text>
<Text>屏幕的高度是:{
height}</Text>
<Text>屏幕的像素比是:{
scale}</Text>
</View>
)
}
}
实现效果:
练习题
书写一个满屏的盒子 && 书写一条最细的线
代码笔记:
app.js:
// 4、练习题
// 1) 书写一个满屏的盒子
// 2) 书写一条最细的线(高度最小)
import React, {
Component } from "react"
import {
View, Text, Dimensions, StyleSheet } from "react-native"
const {
width, height, scale } = Dimensions.get('window')
export default class App3 extends Component {
render() {
return (
<View style={
styles.container}>
{
/* 获取的是可用范围的宽高 */}
<Text>屏幕的宽度是:{
width}</Text>
<Text>屏幕的高度是:{
height}</Text>
<Text>屏幕的像素比是:{
scale}</Text>
<View style={
styles.line}></View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
// width,
// height,
// width: "100%",
// height: "100%",
flex: 1,
backgroundColor: "pink"
},
line: {
// 高 / 像素比
height: 1 / scale,
backgroundColor: "#000"
}
})
实现效果:
Flex布局
与CSS中的Flex布局类似:https://blog.csdn.net/qq_53472371/article/details/120919930
但是React Native要用 flexDirction\ alignItem\ justifyContent
代码笔记:
// 5、flex布局
import React, {
Component } from "react"
import {
View, Text, StyleSheet } from "react-native"
export default class App5 extends Component {
render() {
return (
<View style={
styles.container}>
<View style={
styles.box1}><Text style={
{
fontSize: 20 }}>1</Text></View>
<View style={
styles.box2}><Text style={
{
fontSize: 40 }}>2</Text></View>
<View style={
styles.box3}><Text style={
{
fontSize: 30 }}>3</Text></View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flex: 1,
// 确定哪个是主轴
// flexDirection的4个值:'row', 'row-reverse', 'column', 'column-reverse'
flexDirection: "row",
// 控制主轴对齐方式
// justifyContent的4个值:'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
// justifyContent: "space-between"
justifyContent: 'center',
// 控制侧轴方向的对齐方式
// alignItems的4个值:'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
// 'stretch' 设置侧轴方向上的拉伸,高度没有设置值,才能看到效果(要去掉高度属性)
// 'baseline' 设置基线对齐,设置以文字底部来对齐
// alignItems: 'baseline'
alignItems: 'center'
},
box1: {
width: 100,
height: 100,
backgroundColor: "#ccc"
},
box2: {
width: 100,
height: 100,
backgroundColor: "#fcf"
},
box3: {
width: 100,
height: 100,
backgroundColor: "#ffc"
},
})
Flex布局练习
代码笔记:
// 6、Flex布局练习
import React, {
Component } from "react"
import {
View, Text, StyleSheet, Dimensions } from "react-native"
const {
width, height, scale } = Dimensions.get('window')
// 抽组件
class Row extends Component {
render() {
return (
<View style={
styles.row}>
<View style={
styles.box1}><Text>1</Text></View>
<View style={
styles.box2}><Text>2</Text></View>
<View style={
styles.box3}><Text>3</Text></View>
</View>
)
}
}
export default class App6 extends Component {
render() {
return (
<View style={
styles.container}>
<Text style={
{
fontSize: 18 }}>Flex布局练习</Text>
<View style={
styles.boxs}>
<Row />
<Row />
<Row />
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
alignItems: 'center',
paddingTop: 80
},
boxs: {
width: width * 0.9, // 0.9倍的屏幕宽度
height: 200,
backgroundColor: "#ccc",
marginTop: 10
},
row: {
flex: 1,
borderWidth: 1,
borderColor: "#000",
// 设置主轴方向为水平
flexDirection: "row"
},
box1: {
flex: 1.5,
borderWidth: 1,
borderColor: "#f00",
},
box2: {
flex: 1,
borderWidth: 1,
borderColor: "#f00",
},
box3: {
flex: 2,
borderWidth: 1,
borderColor: "#f00",
}
})
实现效果:
Button按钮组件
代码笔记:
app.js:
// Button按钮组件
import React, {
Component } from "react"
import {
View, Text, StyleSheet, Button } from "react-native"
export default class App7 extends Component {
constructor(props) {
super(props)
this.state = {
num: 20
}
// this的指向问题
this.handlePress = this.handlePress.bind(this)
}
handlePress() {
// alert(123);
this.setState({
num: this.state.num + 1
})
}
render() {
return (
<View>
<Text>{
this.state.num}</Text>
<Button title="按钮中的文本" color="skyblue" onPress={
this.handlePress} style={
styles.btn}></Button>
</View>
)
}
}
// Button按钮组件不能修改样式!!!
const styles = StyleSheet.create({
btn: {
width: 150,
height: 100
}
})
自定义按钮组件TouchableOpacity
因为Button样式本身有局限性。TouchableOpacity组件可以自由定义组件样式。
代码笔记:
app.js:
// Button按钮组件
import React, {
Component } from "react"
import {
View, Text, StyleSheet, Button, TouchableOpacity } from "react-native"
export default class App7 extends Component {
constructor(props) {
super(props)
this.state = {
num: 20
}
// this的指向问题
this.handlePress = this.handlePress.bind(this)
}
handlePress() {
// alert(123);
this.setState({
num: this.state.num + 1
})
}
render() {
return (
<View>
<Text>{
this.state.num}</Text>
<Button title="按钮中的文本" color="skyblue" onPress={
this.handlePress} style={
styles