ReactNative 基础知识分享
ReactNative 官方网址 https://www.react-native.cn/docs/touchablewithoutfeedback
目前公司项目使用的两个版本 旧版本0.53 新版本0.63
两种写法 class与redux
一、环境搭建
官网地址 https://www.react-native.cn/docs/environment-setup
二、ReactNative 基础知识
1、常用组件
例：Text
import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";
class TextDemo extends Component {
constructor(props) {
super(props);
this.state = {
titleText: "标题",
bodyText: "文本啦啦啦啦"
};
}
onPressTitle = () => {
this.setState({ titleText: "标题变了啊" });
};
render() {
return (
<View style={styles.baseView}>
<Text
style={styles.titleText}
onPress={this.onPressTitle}
>
{this.state.titleText}
</Text>
<Text numberOfLines={5}>{this.state.bodyText}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
baseView: {
backgroundColor : "#FFF"
},
titleText: {
fontSize: 20,
fontWeight: "bold"
}
});
export default TextDemo;
常用组件 View TextInput StatusBar ScrollView TouchableOpacity FlatList Modal ...
2、样式
在 React Native 中，我们不需要学习什么特殊的语法来定义样式。仍然可以使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。通常我们会下面这样声明：
const styles = StyleSheet.create({
demoBox: {
height: 44,
flexDirection: "row",
alignItems: 'center',
justifyContent: "center",
paddingLeft: 15,
paddingRight: 15,
borderBottomWidth: 1,
borderColor: "#dedede",
backgroundColor: "#469cf8"
},
});
3、语法
① 生命周期
componentWillMount(){}
这个函数调用时机是在组件创建，并初始化状态后，在第一次绘制render()z之前。可以在这里做一些业务初始化操作，也可以设置组件状态。整个生命周期中只调用一次。
render(){}
组件渲染，是React Native组件中最重要的函数。
componentDidMount(){}
在组件第一次绘制之后，会调用componentDidMount(),通知组件以及加载完成。
componentWillReceiveProps(){}
如果组件收到新的属性(props),就会调用，还经常在反向传值中使用（新版本废弃，老版本可以使用）
componentWillUpdate(){}
在这个函数中，可以做一些在更新界面之前要做的事情。
componentDidUpdate(){}
调用了 render方法更新完成界面之后，会调用 componentDidUpdate方法。
componentWillUnmont(){}
当组件要被从界面上移除时，调用
② props 属性
父传子 不可变
③ state 状态
可变，一般用于内部更改数据所用
④ 路由 跳转
I 新建界面，并且在App.js 声明
import DemoClass from './views/DemoClass';
<Scene key="DemoClass" component={DemoClass} title="测试界面" hideNavBar={true} />
II 跳转
Actions.DemoClass({
id: 1,
key: this.state.key,
});
III
this.props.id
⑤ 网络请求
I 声明，并且在Api.js 声明
GET_TEST_LIST: 'test/list', //备注
II 使用
let params = Object.assign({}, commonParams, {
token: await loadHistoryData()，
id：1，
})
params = qs.stringify(params)
axios({
method: 'POST',
url: global.Api.GET_TEST_LIST,
data: params
}).then(res => {
if (res.data.state == STATE.ERR_OK) {
} else if (res.data.state == STATE.NO_LOGIN) {
BaseToast(res.data.message)
Actions.LoginDRCC();
} else {
this.setState({ loading: false });
BaseToast(res.data.message)
}
})
4、参考界面
ProstheticInfo.js //列表 详情
ProstheticAssess.js //列表
EditProstheticInfo.js //表单 提交
EditProstheticPrescription.js //表单 提交
三、ReactNative调试 Debug
访问 App 内的开发菜单
DEMO.png
打开debug
打开热更新
三、CSS常见布局方式
id选择器>class选择器>标签选择器
1、水平居中
实现水平布局比较简单，方法也比较多，这里总结了几种常用的布局方法，其公共的CSS代码如下所示：
<div class="parent">
<div class="child"></div>
</div>
水平居中.png
1. 使用text-align属性
若元素为行内块级元素，也就是display: inline-block的元素，可以通过为其父元素设置text-align: center实现水平居中。实现的CSS代码如下
.parent {
/* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */
text-align: center;
}
.child {
display: inline-block;
}
2. 定宽块级元素水平居中(方法一)
对于定宽的的块级元素实现水平居中，最简单的一种方式就是margin: 0 auto;，但是值得注意的是一定需要设置宽度。
实现CSS代码如下：
.child {
/* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
margin: 0 auto;
}
3. 定宽块级元素水平居中(方法二)
可以通过left属性 和margin实现。
实现CSS代码如下：
.child {
/* 开启定位 */
position: relative;
left: 50%;
/* margin-left 为 负的宽度的一半 */
margin-left: -150px;
}
4. flex方案
通过Flex可以有很多方式实现这个居中布局的效果。
实现CSS代码如下：
.parent {
height: 300px;
/* 开启 Flex 布局 */
display: flex;
/* 通过 justify-content 属性实现居中 */
justify-content: center;
}
.child {
/* 或者 子元素 margin: auto*/
margin: auto;
}
5. Grid方案
实现CSS代码如下：
.parent {
height: 300px;
/* 开启 Grid 布局 */
display: grid;
/* 方法一 */
justify-items: center;
/* 方法二 */
justify-content: center;
}
.child {
/* 方法三 子元素 margin: auto*/
margin: auto;
}
2、垂直居中
<div class="parent">
<div class="child"></div>
</div>
.parent {
height: 500px;
width: 300px;
margin: 0 auto;
background-color: #ff8787;
}
.child {
width: 300px;
height: 300px;
background-color: #91a7ff;
}
垂直居中.png
1. 定位方式实现(方法一)
.parent {
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
position: absolute;
top: 50%;
/* margin-top: 等于负高度的一半 */
margin-top: -150px;
}
2. 定位方式实现(方法二)
第二种通过定位的方式实现实现思路：top和bottom将子元素拉伸至100%，设置指定的高度，通过margin:auto;即可实现垂直居中。
.parent {
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
height: 300px;
position: absolute;
/* 垂直拉满 */
top: 0;
bottom: 0;
/* margin: auto 即可实现 */
margin: auto;
}
3. flex方案
通过Flex可以有很多方式实现这个垂直居中布局的效果。
.parent {
/* 开启 flex 布局 */
display: flex;
/* 方法一 */
/* align-items: center; */
}
.child {
/* 方法二 */
margin: auto;
}
4. Grid方案
.parent {
display: grid;
/* 方法一 */
/* align-items: center; */
/* 方法二 */
/* align-content: center; */
}
.child {
/* 方法三 */
/* margin: auto; */
/* 方法四 */
align-self: center;
}
3、水平垂直居中
body {
margin: 0;
}
.parent {
height: 500px;
width: 500px;
background-color: #eebefa;
margin: 0 auto;
}
.child {
height: 300px;
width: 300px;
background-color: #f783ac;
}
<div class="parent">
<div class="child"></div>
</div>
水平垂直.png
1.行内块级水平垂直居中方案
步骤如下：
1.容器元素行高等于容器高度
2.通过text-align: center;实现水平居中
3.将子级元素设置为水平块级元素
4.通过vertical-align: middle;实现垂直居中
实现CSS代码如下：
.parent {
/* 1. 设置行高等于容器高度 */
line-height: 500px;
/* 通过 text-align: center; 实现水平居中 */
text-align: center;
}
.child {
/* 将子级元素设置为水平块级元素 */
display: inline-block;
/* 通过 vertical-align: middle; 实现垂直居中 */
vertical-align: middle;
}
2.定位实现水平垂直居中方案(一)
步骤如下：
1.使子元素相对于容器元素定位
2.子元素开启绝对定位
3.设置该元素的偏移量，值为50% 减去宽度/高度的一半
实现CSS代码如下：
.parent {
/* 1. 使子元素相对于本元素定位 */
position: relative;
}
.child {
/* 2. 开启绝对定位 */
position: absolute;
/* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
left: calc(50% - 150px);
top: calc(50% - 150px);
}
3.Flex方案
.parent {
/* 1. 将元素设置为 Flex 布局 */
display: flex;
/* 2. 通过 justify-content 以及 align-items: center 实现 */
/* justify-content: center;
align-items: center; */
}
.child {
/* 或者通过 margin auto 实现 */
margin: auto;
}
网友评论