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)
}
})
三、ReactNative调试 Debug
访问 App 内的开发菜单
DEMO.png
打开debug
打开热更新
